Adalah peta lebih cepat daripada untuk loop javascript

Beberapa fungsi yang paling disukai dalam JavaScript mungkin adalah map dan forEach. 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, mengulang objek dalam JavaScript bergantung pada apakah objek tersebut merupakan iterable. Array dapat diubah secara default

map dan forEach 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

forEach adalah fungsi perulangan lain untuk array tetapi ada perbedaan antara map dan forEach 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 keduanya 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_ sangat umum digunakan 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

Apa yang lebih cepat daripada for loop di JavaScript?

Mengapa kami menggunakan map alih-alih for loop di JavaScript?

Apakah peta JavaScript lambat?

Apa yang lebih cepat dari for loop?