Foreach javascript vs untuk kinerja

Loop forEach dan for dapat digunakan untuk mencapai fungsi yang sama secara efektif untuk array. Sebagai contoh

for (var i = 0; i < array.length; i++){ /* .. */ }

dan

array.forEach(function(item, index){ /* .. */ });

Apakah ada perbedaan di antara mereka?

Perbedaan

Perbedaan paling mendasar antara for loop dan forEach metode adalah

Dengan for

1. Anda dapat

   array.forEach(function(item, index){ /* .. */ });

   _4 keluar dari loop
2. Anda dapat menggunakan

   array.forEach(function(item, index){ /* .. */ });

   _5 untuk melompati iterasi
3. Performanya jauh lebih cepat daripada forEach
4. Cakupan indeks, misalnya i, dicakup ke fungsi yang memuatnya.

   // 'i' is scoped to the containing function
   for (var i = 0; i < arr.length; i++) { .. }

   _

Dengan forEach

1. Anda dapat mensimulasikan

   array.forEach(function(item, index){ /* .. */ });

   5 hanya dengan kembali dari fungsi yang diteruskan ke forEach
2. Namun, tidak ada cara untuk menghentikan ________32______ perulangan sama sekali
3. Kinerja jauh lebih lambat dari for
4. Cakupan indeks, misalnya i, dicakup ke fungsi internal.

   // 'i' is scoped to the internal function
   arr.forEach(function (el, i) { .. });

   _
5. Namun, forEach lebih ekspresif. Ini mewakili maksud Anda untuk beralih melalui setiap elemen array, dan memberi Anda referensi ke elemen tersebut, bukan hanya indeks

Uji kinerja

Tes kinerja dijalankan di jsperf. com tes untuk loop vs foreach

Berikut perbedaan performa saat menjalankan pengujian di Chrome 47 di Mac OS X

Cakupan perbedaan indeks secara detail

Katakanlah saya ingin melakukan sesuatu yang asinkron dengan elemen-elemen array

// The array:
var elements = ["element1", "element2", "element3"];

Beginilah seharusnya diterapkan menggunakanforEach

elements.forEach(function(element) {
  // The asynchronous action simulator
  setTimeout(function() {
    console.log(element);
  }, 100);
});

Tanpa mengetahui tentang

// 'i' is scoped to the containing function
for (var i = 0; i < arr.length; i++) { .. }

// 'i' is scoped to the containing function
for (var i = 0; i < arr.length; i++) { .. }

for (var i = 0; i < elements.length; i++) {
  setTimeout(function() {
     console.log(elements[i]);
  }, 100);
}

Ini tidak berfungsi seperti yang diharapkan, karena alih-alih

// 'i' is scoped to the containing function
for (var i = 0; i < arr.length; i++) { .. }

// 'i' is scoped to the containing function
for (var i = 0; i < arr.length; i++) { .. }

// 'i' is scoped to the containing function
for (var i = 0; i < arr.length; i++) { .. }

// 'i' is scoped to the containing function
for (var i = 0; i < arr.length; i++) { .. }

// 'i' is scoped to the internal function
arr.forEach(function (el, i) { .. });

// 'i' is scoped to the internal function
arr.forEach(function (el, i) { .. });

// 'i' is scoped to the internal function
arr.forEach(function (el, i) { .. });

// 'i' is scoped to the internal function
arr.forEach(function (el, i) { .. });

// 'i' is scoped to the internal function
arr.forEach(function (el, i) { .. });

// 'i' is scoped to the containing function
for (var i = 0; i < arr.length; i++) { .. }

JavaScript memiliki beberapa metode array bawaan, hampir semuanya memiliki loop di dalamnya. Pertama saya akan menjalankan benchmark dengan 4 metode JS yang paling umum digunakan untuk loop

Seperti yang Anda lihat, forEach memiliki kinerja terbaik dari 4

Alasan mengapa forEach lebih cepat dari map dan filter adalah karena tidak akan mengembalikan apa pun setelah selesai, hanya undefined tetapi map dan filter akan mengembalikan array baru.

var len = arr.length;
for (var x = 0; x < len; x++) {
    dosmth = arr[x];
}

var len = arr.length;
for (var x = 0; x < len; x++) {
    dosmth = arr[x];
}

Metode array bawaan mudah digunakan dan memiliki kasus penggunaan yang berbeda, dan kinerjanya tidak terlalu signifikan jika dibandingkan dengan fungsi-fungsi tersebut, mereka indah untuk dilihat, dibaca, ditulis, dan deklaratif. Tetapi ketika kinerja benar-benar penting, pendekatan penting lainnya berkali-kali lebih cepat

Pertama, lihat ini

Anda dapat melihat bahwa

var len = arr.length;
for (var x = 0; x < len; x++) {
    dosmth = arr[x];
}

var len = arr.length;
for (var x = 0; x < len; x++) {
    dosmth = arr[x];
}

Sekarang perhatikan lebih dalam loop tradisional lainnya

Untuk loop, panjang tidak di-cache

for (var x = 0; x < arr.length; x++) {
 dosmth = arr[x];
}

Untuk loop, panjang di-cache

var len = arr.length;
for (var x = 0; x < len; x++) {
    dosmth = arr[x];
}

Untuk… dari loop

for (let val of arr) {
    dosmth = val;
}

Sementara loop, ++x

var x = 0, l = arr.length;
while (x < l) {
    dosmth = arr[x];
   ++x;
}

Sementara loop, x ++

var x = 0, l = arr.length;
while (x < l) {
    dosmth = arr[x];
   x++;
}

Sekarang saya akan menjalankan benchmark, hasilnya

Dalam kasus umum,

var len = arr.length;
for (var x = 0; x < len; x++) {
    dosmth = arr[x];
}

Jika Anda lebih suka pemrograman deklaratif, gunakan saja metode array, mereka lebih mudah dibaca, ditulis secara umum, dan lebih baik dalam 99% kasus dalam JavaScript
Tetapi jika Anda lebih suka kinerja, gunakan saja pendekatan imperatif lainnya
Dengan kata lain, pilih saja jenis loop yang sesuai dengan gaya dan situasi Anda

Meskipun konten saya gratis untuk semua orang, tetapi jika menurut Anda artikel ini bermanfaat, Anda dapat membelikan saya kopi di sini

Alat sumber terbuka Bit membantu 250.000+ pengembang untuk membangun aplikasi dengan komponen

Ubah UI, fitur, atau halaman apa pun menjadi komponen yang dapat digunakan kembali — dan bagikan ke seluruh aplikasi Anda. Lebih mudah untuk berkolaborasi dan membangun lebih cepat

→ Pelajari lebih lanjut

Pisahkan aplikasi menjadi beberapa komponen untuk mempermudah pengembangan aplikasi, dan nikmati pengalaman terbaik untuk alur kerja yang Anda inginkan

Mana yang lebih cepat untuk atau untukEach di JavaScript?

Apakah forEach lebih lambat daripada untuk Java?

Jenis loop mana yang lebih cepat?

Mana yang lebih efisien untuk loop atau while loop dalam JavaScript?