JavaScript: Perbedaan antara .forEach () dan .map ()

Saya tahu ada banyak topik seperti ini. Dan saya tahu dasar-dasarnya: .forEach()beroperasi pada array asli dan .map()yang baru.

Dalam kasus saya:

function practice (i){
    return i+1;
};

var a = [ -1, 0, 1, 2, 3, 4, 5 ];
var b = [ 0 ];
var c = [ 0 ];
console.log(a);
b = a.forEach(practice);
console.log("=====");
console.log(a);
console.log(b);
c = a.map(practice);
console.log("=====");
console.log(a);
console.log(c);

Dan inilah keluarannya:

[ -1, 0, 1, 2, 3, 4, 5 ]
=====
[ -1, 0, 1, 2, 3, 4, 5 ]
undefined
=====
[ -1, 0, 1, 2, 3, 4, 5 ]
[ 0, 1, 2, 3, 4, 5, 6 ]

Saya tidak mengerti mengapa menggunakan practiceperubahan nilai bmenjadi undefined.
Maaf jika ini adalah pertanyaan konyol, tetapi saya cukup baru dalam bahasa ini dan jawaban yang saya temukan sejauh ini tidak memuaskan saya.

Mereka tidak satu dan sama. Izinkan saya menjelaskan perbedaannya.

forEach: Ini mengulangi daftar dan menerapkan beberapa operasi dengan efek samping untuk setiap anggota daftar (contoh: menyimpan setiap item daftar ke database)

map: Ini mengulangi daftar, mengubah setiap anggota daftar itu, dan mengembalikan daftar lain dengan ukuran yang sama dengan anggota yang diubah (contoh: mengubah daftar string menjadi huruf besar)

Referensi

Array.prototype.forEach () - JavaScript | MDN

Array.prototype.map () - JavaScript | MDN

• Array.forEach "Menjalankan fungsi yang disediakan sekali per elemen array."

• Array.map "Membuat array baru dengan hasil memanggil fungsi yang disediakan pada setiap elemen dalam array ini."

Jadi, forEachsebenarnya tidak mengembalikan apa pun. Itu hanya memanggil fungsi untuk setiap elemen array dan kemudian selesai. Jadi, apa pun yang Anda kembalikan dalam fungsi yang dipanggil itu akan dibuang begitu saja.

Di sisi lain, mapakan sama memanggil fungsi untuk setiap elemen array tetapi alih-alih membuang nilai kembaliannya, ia akan menangkapnya dan membangun larik baru dari nilai-nilai yang dikembalikan tersebut.

Ini juga berarti bahwa Anda dapat menggunakan di mapmana pun Anda menggunakan forEachtetapi Anda tetap tidak boleh melakukannya sehingga Anda tidak mengumpulkan nilai pengembalian tanpa tujuan apa pun. Akan lebih efisien jika Anda tidak mengumpulkannya jika Anda tidak membutuhkannya.

+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| | foreach | peta |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| Fungsi | Melakukan operasi tertentu pada setiap | Melakukan "transformasi" yang diberikan pada |
| | elemen dari array | "copy" dari setiap elemen |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| Nilai kembali | Mengembalikan undefined | Mengembalikan array baru dengan tranformed |
| | | elemen meninggalkan kembali larik asli |
| | | tidak berubah |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| Lebih disukai | Melakukan non-transformasi seperti | Memperoleh larik yang berisi keluaran |
| skenario penggunaan | memproses pada setiap elemen. | beberapa pemrosesan dilakukan pada setiap elemen |
| dan contoh | | dari larik. |
| | Misalnya, menyimpan semua elemen di | |
| | database | Misalnya, mendapatkan array |
| | | panjang setiap string di |
| | | larik |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +

Perbedaan utama yang perlu Anda ketahui adalah .map()mengembalikan array baru sementara .forEach()tidak. Itulah mengapa Anda melihat perbedaan dalam output. .forEach()hanya beroperasi pada setiap nilai dalam array.

Baca:

• Array.prototype.forEach()- JavaScript | MDN
• Array.prototype.map()- JavaScript | MDN

Anda mungkin juga ingin memeriksa: - Array.prototype.every()- JavaScript | MDN

forEach: Jika Anda ingin melakukan tindakan pada elemen Array dan itu sama seperti yang Anda gunakan untuk perulangan. Hasil dari metode ini tidak memberi kita output beli hanya melalui elemen.

map: Jika Anda ingin melakukan tindakan pada elemen array dan juga ingin menyimpan output dari tindakan Anda ke dalam Array. Ini mirip dengan for loop dalam fungsi yang mengembalikan hasil setelah setiap iterasi.

Semoga ini membantu.

Perbedaannya terletak pada apa yang mereka kembalikan. Setelah eksekusi:

arr.map()

mengembalikan larik elemen yang dihasilkan dari fungsi yang diproses; sementara:

arr.forEach()

mengembalikan tidak ditentukan.

Analisis Kinerja Untuk loop bekerja lebih cepat daripada peta atau foreach karena jumlah elemen dalam array meningkat.

let array = [];
for (var i = 0; i < 20000000; i++) {
  array.push(i)
}

console.time('map');
array.map(num => {
  return num * 4;
});
console.timeEnd('map');


console.time('forEach');
array.forEach((num, index) => {
  return array[index] = num * 4;
});
console.timeEnd('forEach');

console.time('for');
for (i = 0; i < array.length; i++) {
  array[i] = array[i] * 2;

}
console.timeEnd('for');

Perbedaan antara Foreach & map:

Map () : Jika Anda menggunakan map maka map dapat mengembalikan larik baru dengan mengiterasi larik utama.

Foreach () : Jika Anda menggunakan Foreach maka itu tidak dapat mengembalikan apa pun untuk setiap array utama can iterating.

useFul link : gunakan link ini untuk memahami perbedaan

https://codeburst.io/javascript-map-vs-foreach-f38111822c0f

Satu hal yang perlu diperhatikan adalah bahwa foreach melompati nilai yang tidak diinisialisasi sementara map tidak.

var arr = [1, , 3];

arr.forEach(function(element) {
    console.log(element);
});
//Expected output: 1 3

console.log(arr.map(element => element));
//Expected output: [1, undefined, 3];

Perbedaan antara forEach () & map ()

forEach () hanya mengulang melalui elemen. Itu membuang nilai yang dikembalikan dan selalu mengembalikan yang tidak ditentukan. Hasil dari metode ini tidak memberi kita keluaran.

map () loop melalui elemen mengalokasikan memori dan menyimpan nilai yang dikembalikan dengan iterasi array utama

Contoh:

   var numbers = [2,3,5,7];

   var forEachNum = numbers.forEach(function(number){
      return number
   })
   console.log(forEachNum)
   //output undefined

   var mapNum = numbers.map(function(number){
      return number
   })
   console.log(mapNum)
   //output [2,3,5,7]

map () lebih cepat dari forEach ()

Map secara implisit mengembalikan sedangkan forEach tidak.

Inilah sebabnya mengapa saat Anda membuat kode aplikasi JSX, Anda hampir selalu menggunakan peta daripada forEach untuk menampilkan konten di React .

forEach () :

nilai kembali: tidak ditentukan

originalArray: diubah setelah pemanggilan metode

peta () :

nilai kembali: Array baru yang diisi dengan hasil pemanggilan fungsi yang disediakan pada setiap elemen dalam larik pemanggil

originalArray: tidak diubah setelah pemanggilan metode