Jaka jest różnica między .map, .every i .forEach?

118

Zawsze się zastanawiałem, jaka jest różnica między nimi. Wydaje się, że wszyscy robią to samo ...

0x499602D2
źródło
6
Ktoś dodał tag jQuery ... biorąc pod uwagę everyi forEachnie są metodami jQuery, myślę, że jest mało prawdopodobne, aby pytanie dotyczyło jQuery w jakikolwiek sposób. developer.mozilla.org/en/JavaScript/New_in_JavaScript/1.6
James Allardice
Myślę, że ten link powinien zawierać odpowiedź, której szukasz.
zBomb,
Czy mam rację sądząc, że odnosisz się do nowych metod tablicowych specyficznych dla Mozilli, jak opisano szczegółowo w linku w moim poprzednim komentarzu?
James Allardice,
@James - nie są one specyficzne dla Mozilli . Udostępniłbym również link do webkitu i dokumentacji operowej, ale nie wiem, gdzie są one poza zasięgiem mojej głowy.
gilly3,
@ gilly3 - Ach, dobra uwaga. Uważam, że są one obsługiwane tylko w IE9, a nie poniżej.
James Allardice,

Odpowiedzi:

224

Różnica dotyczy wartości zwracanych.

.map() zwraca nową tablicę obiektów utworzonych przez wykonanie jakiejś czynności na oryginalnym elemencie.

.every() zwraca wartość logiczną - true, jeśli każdy element w tej tablicy spełnia podaną funkcję testującą. Ważną różnicą .every()jest to, że funkcja test nie zawsze może być wywoływana dla każdego elementu tablicy. Gdy funkcja testująca zwróci wartość false dla dowolnego elementu, żadne elementy tablicy nie będą już iterowane. Dlatego funkcja testowania zwykle nie powinna powodować skutków ubocznych .

.forEach() nic nie zwraca - iteruje Array wykonując daną akcję dla każdego elementu w Array.

Przeczytaj o tych i wielu innych metodach iteracji Array w MDN .

gilly3
źródło
Alternatywnie można zacytować MDN
JoshWillik
3
@josh - zacytowałem MDN. Nazwa każdej metody jest powiązana z odpowiednią dokumentacją w MDN.
gilly3
@ gilly3, przepraszam, zamknąłem niebieski tekst>.>
JoshWillik
.forEach () zwraca teraz wszystko, co jest nie tak, może nie było to w 2012 roku, ale przynajmniej w 2015 roku w Chrome, spróbuj tego arr2 = ['sue', 'joe', 'ben', 'guy', 'tom', 'jon ']; b = arr2.forEach (function (el, indx) {console.log (indx + ':' + el);}); console.log (b);
jason
1
@EugeneMercer Przez „oryginalny element” rozumiem oryginalną wartość każdego elementu tablicy.
gilly3
88

Odpowiedź gilly3 jest świetna. Chciałem tylko dodać trochę informacji o innych typach funkcji „pętli przez elementy”.

  • .every() (przestaje się zapętlać za pierwszym razem, gdy iterator zwraca fałsz lub coś nie działa)
  • .some() (przestaje się zapętlać za pierwszym razem, gdy iterator zwraca prawdę lub coś prawdziwego)
  • .filter() (tworzy nową tablicę zawierającą elementy, w których funkcja filtrująca zwraca true i pomijając te, w których zwraca false)
  • .map() (tworzy nową tablicę z wartości zwracanych przez funkcję iteratora)
  • .reduce() (buduje wartość przez wielokrotne wywoływanie iteratora, przekazanie poprzednich wartości; szczegółowe informacje można znaleźć w specyfikacji; przydatne do sumowania zawartości tablicy i wielu innych rzeczy)
  • .reduceRight() (jak redukuj, ale działa w porządku malejącym, a nie rosnącym)

kredyt dla: TJCrowder For-each w tablicy w JavaScript?

raphaelgontijolopes
źródło
Zdobądź ode mnie 100 polubień!
Shamim
6

Kolejną kwestią dotyczącą powyższych świetnych odpowiedzi jest łańcuch. Z forEach () nie możesz łączyć, ale z map () możesz.

Na przykład:

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

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

z .forEach () nie możesz wykonać .sort (), pojawi się błąd.

Nadine Rose
źródło
0

W przypadku Ramdy różnica między R.map()i R.forEach()to:

  1. R.forEach()zwraca oryginalną tablicę, podczas gdy R.map()zwraca funktor
  2. R.forEach()może działać tylko na tablicy, ale R.map()może również działać na obiekcie (tj. pary klucz / wartość obiektu są traktowane jak tablica)
Michael Osofsky
źródło
Pytanie dotyczy języka Javascript. Ramda, choć świetna, to zupełnie inny temat i biblioteka.
SeaWarrior404