Apakah filter lebih cepat daripada foreach javascript?

Suatu kali, kami mewawancarai kandidat posisi developer menengah yang tidak dapat menjawab pertanyaan sederhana yang melibatkan loop while. Dia menjelaskan bahwa dia hanya menulis kode deklaratif, dan tidak ada gunanya lagi pemrograman imperatif. Sementara kami sebagian setuju, itu membuat kami berpikir. “haruskah pemrogram selalu memilih .map,

array.forEach((x) => {
   x.r = x.a + x.b;
});

array.forEach((x) => {
   x.r = x.a + x.b;
});

Gaya pemrograman deklaratif sangat ekspresif, lebih mudah ditulis, dan jauh lebih mudah dibaca. Lebih baik 99% dari waktu, tetapi tidak ketika kinerja penting. Loop biasanya tiga kali atau lebih lebih cepat daripada rekan deklaratifnya. Itu tidak menambah perbedaan yang signifikan di sebagian besar aplikasi. Namun, saat memproses data dalam jumlah besar di beberapa aplikasi intelijen bisnis, pemrosesan video, perhitungan ilmiah, atau mesin game, ini akan berdampak besar pada kinerja secara keseluruhan.

Kami telah menyiapkan beberapa tes untuk menunjukkannya. Semua kode tersedia di GitHub. Jangan ragu untuk bermain-main dengannya

Kami akan senang umpan balik dan kontribusi Anda

Daftar isi

Tentang tes

Aplikasi pengujian menggunakan pustaka benchmark untuk mendapatkan hasil yang signifikan secara statistik. Masukan untuk tes adalah larik satu juta objek dengan struktur

array.forEach((x) => {
   x.r = x.a + x.b;
});

function generateTestArray() {
  const result = [];
  for (let i = 0; i < 1000000; ++i) {
    result.push({
      a: i,
      b: i / 2,
      r: 0,
    });
  }
  return result;
}

Kami menggunakan laptop Lenovo T480s dengan Intel Core i5-8250, RAM 16Gb yang menjalankan Ubuntu 20. 04 LTS dengan Node v14. 16. 0 untuk mendapatkan hasil

Himpunan. forEach vs untuk dan untuk. dari

Operasi per detik, lebih tinggi lebih baik

Tes ini menghitung jumlah

array.forEach((x) => {
   x.r = x.a + x.b;
});

array.forEach((x) => {
   x.r = x.a + x.b;
});

array.forEach((x) => {
   x.r = x.a + x.b;
});

array.forEach((x) => {
   x.r = x.a + x.b;
});

Kami sengaja membuat bidang

array.forEach((x) => {
   x.r = x.a + x.b;
});

Bahkan dengan pengujian sederhana ini, loop hampir tiga kali lebih cepat. Loop

array.forEach((x) => {
   x.r = x.a + x.b;
});

array.forEach((x) => {
   x.r = x.a + x.b;
});

Karena

array.forEach((x) => {
   x.r = x.a + x.b;
});

array.forEach((x) => {
   x.r = x.a + x.b;
});

array.forEach(func);

Himpunan. peta vs untuk vs untuk. dari

Operasi per detik, lebih tinggi lebih baik

Tes ini memetakan larik ke larik lain dengan

array.forEach(func);

return array.map((x) => x.a + x.b);

Loop juga jauh lebih cepat di sini.

array.forEach((x) => {
   x.r = x.a + x.b;
});

array.forEach(func);

const result = [];
for (const { a, b } of array) {
   result.push(a + b);
}
return result;

Ini bukan pendekatan yang optimal karena array dialokasikan kembali secara dinamis dan dipindahkan di bawah tenda. Versi

array.forEach((x) => {
   x.r = x.a + x.b;
});

const result = new Array(array.length);
for (let i = 0; i < array.length; ++i) {
   result[i] = array[i].a + array[i].b;
}
return result;

Di sini, kami juga menguji apakah destrukturisasi berdampak pada kinerja. Dengan .map_, tolok ukurnya identik, dan dengan

array.forEach((x) => {
   x.r = x.a + x.b;
});

Himpunan. kurangi vs untuk dan untuk. dari

Operasi per detik, lebih tinggi lebih baik

Di sini kita hanya menghitung jumlah

array.forEach((x) => {
   x.r = x.a + x.b;
});

array.forEach((x) => {
   x.r = x.a + x.b;
});

return array.reduce((p, x) => p + x.a + x.b, 0);

Baik

array.forEach((x) => {
   x.r = x.a + x.b;
});

array.forEach((x) => {
   x.r = x.a + x.b;
});

return array.map((x) => x.a + x.b);

let result = 0;
for (const { a, b } of array) {
   result += a + b;
}
return result;

Menulis bahwa banyak baris kode hanya untuk jumlah sederhana harus memiliki alasan yang kuat, jadi kecuali kinerjanya sangat penting,

array.forEach((x) => {
   x.r = x.a + x.b;
});

Kesimpulan

Tolok ukur membuktikan bahwa pemrograman imperatif dengan loop menghasilkan kinerja yang lebih baik daripada menggunakan metode Array yang nyaman. Memanggil fungsi panggilan balik tidak gratis dan bertambah untuk array besar. Namun, untuk kode yang lebih kompleks daripada jumlah sederhana, tidak akan ada banyak perbedaan relatif, karena penghitungannya sendiri akan memakan waktu lebih lama

Kode imperatif jauh lebih bertele-tele dalam banyak kasus. Lima baris kode untuk jumlah yang sederhana terlalu banyak, dan

return array.map((x) => x.a + x.b);

array.forEach((x) => {
   x.r = x.a + x.b;
});

array.forEach((x) => {
   x.r = x.a + x.b;
});

array.forEach((x) => {
   x.r = x.a + x.b;
});

Tidak seperti di AssemblyScript, mikro-optimasi dari

array.forEach((x) => {
   x.r = x.a + x.b;
});

Pra-alokasi array dengan panjang yang diketahui jauh lebih cepat daripada mengandalkan pertumbuhan dinamis dengan

array.forEach(func);

Pengembang yang baik harus mengetahui cara kerja kode dan memilih solusi terbaik dalam setiap situasi. Pemrograman deklaratif, dengan kesederhanaannya, paling sering menang. Menulis kode tingkat rendah hanya masuk akal dalam dua kasus

Mana yang lebih cepat untuk Setiap atau filter dalam JavaScript?

Apakah filter lebih baik daripada forEach?

Mana yang lebih cepat untuk Setiap atau kurangi?

Apa loop tercepat dalam JavaScript?