Apa perbedaan antara .map, .every, dan .forEach?

118

Saya selalu bertanya-tanya apa perbedaan di antara mereka. Mereka semua sepertinya melakukan hal yang sama ...

javascript foreach map-function

— 0x499602D2
sumber

6

Seseorang menambahkan tag jQuery ... mempertimbangkan everydan forEachbukan metode jQuery, saya pikir pertanyaan itu tidak mungkin berhubungan dengan jQuery dengan cara apa pun. developer.mozilla.org/en/JavaScript/New_in_JavaScript/1.6

— James Allardice

Saya pikir tautan ini seharusnya memiliki jawaban yang Anda cari.

— zBomb

Apakah saya benar berpikir Anda mengacu pada metode array spesifik Mozilla baru seperti yang dijelaskan dalam tautan di komentar saya sebelumnya?

— James Allardice

@James - Ini bukan khusus Mozilla . Saya akan membagikan tautan ke webkit dan dokumen opera juga, tetapi saya tidak tahu di mana mereka berada di luar kepala saya.

— gilly3

@ gilly3 - Ahh, poin yang bagus. Saya yakin mereka hanya didukung di IE9, bukan di bawah.

— James Allardice

224

Perbedaannya terletak pada nilai yang dikembalikan.

.map() mengembalikan Array baru dari objek yang dibuat dengan mengambil beberapa tindakan pada item asli.

.every() mengembalikan boolean - true jika setiap elemen dalam larik ini memenuhi fungsi pengujian yang disediakan. Perbedaan penting dengan .every()adalah bahwa fungsi pengujian tidak selalu dipanggil untuk setiap elemen dalam larik. Setelah fungsi pengujian mengembalikan nilai false untuk elemen apa pun, tidak ada lagi elemen array yang diiterasi. Oleh karena itu, fungsi pengujian biasanya tidak memiliki efek samping .

.forEach() tidak mengembalikan apa - apa - Ini mengulang Array yang melakukan tindakan tertentu untuk setiap item dalam Array.

Baca tentang ini dan banyak metode iterasi Array lainnya di MDN .

— gilly3
sumber

Bergantian, MDN dapat dikutip

— JoshWillik

3

@ Josh - Saya memang mengutip MDN. Setiap nama metode ditautkan ke dokumentasinya yang sesuai di MDN.

— gilly3

@ gilly3, maaf, saya mengabaikan teks biru>.>

— JoshWillik

.forEach () mengembalikan tidak ada yang salah sekarang, mungkin bukan pada tahun 2012 tetapi setidaknya pada tahun 2015 di Chrome, coba arr2 = ['sue', 'joe', 'ben', 'guy', 'tom', 'jon ini ']; b = arr2.forEach (fungsi (el, indx) {console.log (indx + ':' + el);}); console.log (b);

— jason

1

@EugeneMercer Yang saya maksud dengan "item asli" adalah nilai asli dari setiap elemen array.

— gilly3

88

Jawaban gilly3 bagus. Saya hanya ingin menambahkan sedikit informasi tentang jenis lain dari fungsi "perulangan melalui elemen".

.every() (berhenti mengulang saat pertama kali iterator mengembalikan false atau sesuatu yang salah)
.some() (berhenti mengulang saat pertama kali iterator mengembalikan true atau sesuatu yang benar)
.filter() (membuat array baru termasuk elemen di mana fungsi filter mengembalikan nilai true dan menghilangkan yang mengembalikan salah)
.map() (membuat array baru dari nilai yang dikembalikan oleh fungsi iterator)
.reduce() (membangun nilai dengan memanggil berulang kali iterator, meneruskan nilai sebelumnya; lihat spesifikasi untuk detailnya; berguna untuk menjumlahkan isi dari sebuah larik dan banyak hal lainnya)
.reduceRight() (seperti mengurangi, tetapi berfungsi dalam urutan menurun daripada naik)

kredit untuk: TJCrowder Untuk masing-masing di atas array di JavaScript?

— raphaelgontijolopes
sumber

Dapatkan 100 suka dari saya!

— Shamim

6

Pertimbangan lain untuk jawaban bagus di atas adalah merangkai. Dengan forEach () Anda tidak bisa merangkai, tetapi dengan map (), Anda bisa.

Sebagai contoh:

var arrayNumbers = [3,1,2,4,5];

arrayNumbers.map(function(i) {
    return i * 2
}).sort();

dengan .forEach (), Anda tidak dapat melakukan .sort (), Anda akan mendapatkan error.

— Nadine Rose
sumber

0

Untuk Ramda , perbedaan antara R.map()dan R.forEach()adalah:

R.forEach()mengembalikan array asli sedangkan R.map()mengembalikan functor
R.forEach()hanya dapat beroperasi pada larik tetapi R.map()juga dapat beroperasi pada suatu objek (yaitu pasangan kunci / nilai dari objek tersebut diperlakukan seperti larik)

— Michael Osofsky
sumber

Pertanyaannya adalah terkait bahasa Javascript. Ramda sementara hebat adalah topik dan perpustakaan yang sama sekali berbeda.

— SeaWarrior404