Apakah peta lebih lambat daripada untuk loop javascript?

Kesimpulan

Menurut kasus uji, tidak ada salahnya menggunakan fungsi tingkat tinggi saat kita TIDAK perlu merantainya. Performanya jauh lebih baik (1. 63x lebih cepat) saat kami menggunakan fungsi peta bawaan atau sedikit lebih baik/lebih buruk saat kami menggunakan filter/perkecil bawaan

Jika kita ingin menggabungkan fungsi tingkat tinggi, kita harus mempertimbangkan untuk tidak menggunakannya dan mengimplementasikannya sebagai solusi for-in loop. Performanya jauh lebih baik, 2. 37x lebih cepat (dalam contoh artikel ini) daripada fungsi bawaan

Tidak perlu selalu menggunakan elemen, struktur, atau fungsi modern dari bahasa modern hanya karena sintaksnya terlihat lebih baik atau semua orang menggunakannya. Kompleksitas waktu dan ruang jauh lebih penting daripada sintaksis modern dan pada akhirnya, sintaksis mewah tidak membuat kita menjadi pengembang yang lebih baik, meskipun kita mungkin berpikir demikian

Ada berbagai cara untuk mengulang array dalam JavaScript, tetapi mungkin sulit untuk memilih yang tepat. Ada JavaScript klasik untuk loop, metode JavaScript forEach, dan for…of loop, yang diperkenalkan pada edisi keenam EcmaScript (ES6), memungkinkan programmer untuk mengulang objek iterable yang sebenarnya.

Loop menawarkan cara cepat dan mudah untuk melakukan sesuatu berulang kali. Dalam bab ini, saya akan membahas berbagai pernyataan iterasi yang tersedia di JavaScript dan juga mana yang akan dieksekusi dengan cepat dan memberikan kinerja yang lebih baik

Loop untuk mengulangi array

1. untuk
2. untuk… dari
3. untuk setiap

Untuk mengulang larik, mari buat larik dengan 50000 elemen untuk menghitung waktu eksekusi. kita dapat membuat array yang berisi 50.000 elemen dengan dua pendekatan

untuk putaran

Jenis paling dasar dari metode iterasi dalam JavaScript adalah for loop. Dibutuhkan tiga ekspresi;

JavaScript for loop_mengulang elemen untuk jumlah waktu yang tetap. Ini harus digunakan jika jumlah iterasi diketahui. Sintaks untuk loop diberikan di bawah ini

mari hitung waktu eksekusi dengan menggunakan console.time() dan console.timeEnd()pernyataan dalam JavaScript. mari kita lihat bagaimana kita dapat menggunakan pernyataan tersebut

untuk… dari loop

Pernyataan for...of_ membuat pengulangan berulang pada objek yang dapat diubah, termasuk String bawaan, Array, objek mirip array (e. g. , arguments atau NodeList), TypedArray, Mapdan console.time()0 dalam JavaScript

for...of_ loop adalah yang tercepat dalam hal kumpulan data kecil, tetapi skalanya buruk untuk kumpulan data besar. Ini paling lambat, tetapi ini adalah gula sintaksis untuk loop

mari kita periksa waktu eksekusi untuk for...of loop dengan cara yang sama

untukSetiap putaran

Metode console.time()_3 dalam Javascript mengulangi elemen array dan memanggil fungsi yang disediakan untuk setiap elemen secara berurutan

Waktu eksekusi console.time()_3 secara dramatis dipengaruhi oleh apa yang terjadi di dalam setiap iterasi. Ini cepat dan dirancang untuk kode fungsional

mari kita ulangi array dengan forEach dan periksa waktu eksekusi

Sekarang saatnya untuk memeriksa waktu eksekusi untuk ketiga metode perulangan. Eksekusi javascript sangat bergantung pada berbagai faktor seperti jenis sistem operasi seperti Windows dan jenis browser seperti Chrome, IE, Firefox

Hasilnya cukup menarik dan tidak seperti yang saya harapkan

Pengulangan for tradisional adalah yang tercepat, jadi Anda harus selalu menggunakannya, bukan? . Jarang Anda perlu mengulang lebih dari 1 juta item di aplikasi JS frontend. Keterbacaan Kode biasanya lebih penting, jadi default ke gaya yang sesuai dengan aplikasi Anda

Jika Anda lebih suka menulis kode fungsional, maka forEach ideal, sedangkan for-of bagus jika sebaliknya. Baris kode yang lebih sedikit berarti waktu pengembangan yang lebih singkat dan biaya perawatan yang lebih sedikit — optimalkan untuk kebahagiaan developer terlebih dahulu, kemudian kinerja

Beberapa fungsi yang paling disukai dalam JavaScript mungkin ________ 34 _______ dan _______ 35 _______. Keduanya mulai ada sejak ECMAScript 5, ataues5 singkatnya

Dalam posting ini, saya akan berbicara tentang perbedaan utama antara masing-masing dan menunjukkan kepada Anda beberapa contoh penggunaannya

Sebelum membaca

Pada dasarnya, pengulangan objek dalam JavaScript bergantung pada apakah objek tersebut adalah iterable. Array dapat diubah secara default

________34 _______ dan _______ 35 _______ termasuk dalam

const arr = [1];
const new_arr = arr.map(d => d);arr === new_arr; // false

Apakah

const arr = [1];
const new_arr = arr.map(d => d);arr === new_arr; // false

const arr = [1];
const new_arr = arr.map(d => d);arr === new_arr; // false

map dan forEach adalah metode pembantu dalam array untuk mengulang array dengan mudah. Kami biasa mengulang array, seperti di bawah ini, tanpa fungsi pembantu apa pun

Loop

const arr = [1];
const new_arr = arr.map(d => d);arr === new_arr; // false

Ini adalah cara klasik untuk mengulang array. Sejak ECMAScript 5, fungsi baru muncul untuk membuat kita lebih bahagia

peta

map melakukan hal yang persis sama seperti yang dilakukan oleh

const arr = [1];
const new_arr = arr.map(d => d);arr === new_arr; // false

Dibutuhkan dua parameter. fungsi panggilan balik yang akan dipanggil nanti saat map atau forEach dipanggil, dan variabel konteks disebut

[1,2,3].map(d => d + 1); // [2, 3, 4];
[1,2,3].forEach(d => d + 1); // undefined;

Fungsi panggilan balik dapat digunakan seperti di bawah ini

arr.map((str) => { console.log(Number(str)); })

Hasil dari map tidak sama dengan array asli

const arr = [1];
const new_arr = arr.map(d => d);arr === new_arr; // false

Anda juga dapat meneruskan objek ke map sebagai

[1,2,3].map(d => d + 1); // [2, 3, 4];
[1,2,3].forEach(d => d + 1); // undefined;

Objek

[1,2,3].map(d => d + 1); // [2, 3, 4];
[1,2,3].forEach(d => d + 1); // undefined;

[1,2,3].map(d => d + 1); // [2, 3, 4];
[1,2,3].forEach(d => d + 1); // undefined;

[1,2,3].map(d => d + 1); // [2, 3, 4];
[1,2,3].forEach(d => d + 1); // undefined;

[1,2,3].map(d => d + 1); // [2, 3, 4];
[1,2,3].forEach(d => d + 1); // undefined;

Ini karena fungsi panah bekerja secara berbeda dari fungsi normal. Kunjungi artikel ini untuk melihat perbedaan antara fungsi panah dan fungsi normal

untuk setiap

_______ 35 _______ adalah fungsi perulangan lain untuk array tetapi ada perbedaan antara map dan ________35 _______ digunakan. Ada dua parameter yang map dan forEach dapat diambil — fungsi callback dan

[1,2,3].map(d => d + 1); // [2, 3, 4];
[1,2,3].forEach(d => d + 1); // undefined;

Lalu, apa bedanya?

map mengembalikan array baru dari array aslinya. forEach, bagaimanapun, tidak. Namun keduanya memastikan kekekalan objek aslinya

[1,2,3].map(d => d + 1); // [2, 3, 4];
[1,2,3].forEach(d => d + 1); // undefined;

~~ Sunting ~~

forEach_ tidak memastikan kekekalan array jika Anda mengubah nilai di dalam array. Metode ini hanya memastikan kekekalan jika Anda tidak menyentuh nilai apa pun di dalamnya

[{a: 1, b: 2}, {a: 10, b: 20}].forEach((obj) => obj.a += 1);
// [{a: 2, b: 2}, {a: 11, b: 21}]
// The array has been changed!

Contoh di atas adalah dari Kenny Martin Rguez. Terima kasih. 👏

Karena perbedaan utama di antara mereka adalah ada atau tidaknya nilai pengembalian, Anda ingin menggunakan map untuk membuat larik baru dan menggunakan forEach hanya untuk memetakan larik

Ini adalah contoh sederhana

Dalam React, misalnya, map digunakan sangat umum untuk membuat elemen karena map membuat dan mengembalikan array baru setelah memanipulasi data dari array asli

Di sisi lain, forEach berguna saat Anda ingin melakukan sesuatu dengan data tanpa membuat larik baru. Omong-omong, contohnya bisa di-refactored menggunakan

subjects.filter(subject => mySubjectId.includes(subject.id)).length;

subjects.filter(subject => mySubjectId.includes(subject.id)).length;

Untuk meringkas, saya sarankan Anda menggunakan map saat membuat larik baru yang akan Anda gunakan, dan gunakan forEach saat Anda tidak perlu membuat larik baru, melainkan, ada sesuatu yang ingin Anda lakukan dengan data

Perbandingan Kecepatan

Beberapa posting menyebutkan map lebih cepat dari forEach. Jadi, saya ingin tahu apakah itu nyata. Saya menemukan hasil perbandingan ini

Kodenya terlihat sangat mirip tetapi hasilnya sebaliknya. Beberapa tes mengatakan forEach lebih cepat dan beberapa mengatakan map lebih cepat

Mungkin Anda mengatakan pada diri sendiri bahwa map_/forEach lebih cepat dari yang lain, dan Anda mungkin benar. Saya tidak yakin, jujur. Menurut saya keterbacaan jauh lebih penting daripada kecepatan antara map dan forEach dalam hal pengembangan web modern

Tapi satu hal yang pasti — keduanya lebih lambat daripada fitur bawaan JavaScript,

const arr = [1];
const new_arr = arr.map(d => d);arr === new_arr; // false

Kesimpulan

map dan forEach adalah fungsi praktis untuk mengulang objek yang dapat diubah dan mungkin mempercantik kode Anda dan memberi Anda lebih banyak keterbacaan

Tapi satu keynote yang sangat penting untuk diingat adalah memahami apa yang dilakukan masing-masing dan kapan menggunakannya

map akan lebih baik bila Anda ingin membuat larik baru yang tidak memengaruhi larik asli, dan forEach akan lebih baik bila Anda hanya ingin memetakan larik

Apakah map lebih cepat daripada for loop di Javascript?

Apakah map lebih cepat daripada for loop?

Mengapa peta lebih baik daripada for loop?

Apakah peta Javascript lambat?