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
- Anda dapat array.forEach(function(item, index){ /* .. */ });_4 keluar dari loop
- Anda dapat menggunakan array.forEach(function(item, index){ /* .. */ });_5 untuk melompati iterasi
- Performanya jauh lebih cepat daripada forEach
- 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
- Anda dapat mensimulasikan array.forEach(function(item, index){ /* .. */ });5 hanya dengan kembali dari fungsi yang diteruskan ke forEach
- Namun, tidak ada cara untuk menghentikan ________32______ perulangan sama sekali
- Kinerja jauh lebih lambat dari for
- Cakupan indeks, misalnya i, dicakup ke fungsi internal. // 'i' is scoped to the internal function arr.forEach(function (el, i) { .. });_
- 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++) { .. }4 saya akan mulai dengan loop klasik // 'i' is scoped to the containing function for (var i = 0; i < arr.length; i++) { .. }5
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++) { .. }6, // 'i' is scoped to the containing function for (var i = 0; i < arr.length; i++) { .. }7, dan // 'i' is scoped to the containing function for (var i = 0; i < arr.length; i++) { .. }8 di konsol, saya mendapatkan // 'i' is scoped to the containing function for (var i = 0; i < arr.length; i++) { .. }9 tiga kali. Tampaknya ada yang salah dengan variabel // 'i' is scoped to the internal function arr.forEach(function (el, i) { .. });_0, karena fungsinya bekerja dengan baik dengan // 'i' is scoped to the internal function arr.forEach(function (el, i) { .. });1. Sebenarnya tidak ada yang salah dengan // 'i' is scoped to the internal function arr.forEach(function (el, i) { .. });0. Masalahnya adalah nilainya adalah 3 ketika // 'i' is scoped to the internal function arr.forEach(function (el, i) { .. });3 dipanggil dan karena // 'i' is scoped to the internal function arr.forEach(function (el, i) { .. });4 tidak ada, ia mencetak // 'i' is scoped to the containing function for (var i = 0; i < arr.length; i++) { .. }9
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];
}2 hampir secepat forEach, itu karena akan mengembalikan initialValue (jika disediakan) atau mengembalikan nilai setelah perhitungan dalam fungsi var len = arr.length;
for (var x = 0; x < len; x++) {
dosmth = arr[x];
}4 selesai
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
Untuk loopPertama, lihat ini
Anda dapat melihat bahwa var len = arr.length;
for (var x = 0; x < len; x++) {
dosmth = arr[x];
}_5 loop 3 kali lebih cepat daripada metode array seperti forEach map dan var len = arr.length;
for (var x = 0; x < len; x++) {
dosmth = arr[x];
}2. Setelah menerima elemen array, metode array menjalankan fungsi callback untuk setiap elemen
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];
}9 berfungsi dengan baik, tetapi dalam kumpulan data besar, seperti tolok ukur di atas, ini relatif lebih lambat (masih lebih cepat daripada metode array)
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
Bangun aplikasi dengan komponen yang dapat digunakan kembali seperti LegoAlat 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