JavaScript ima neke korisne metode koje nam pomažu da prelistavamo naše nizove. Dvije najčešće korištene za iteraciju su Array.prototype.map()
i Array.prototype.forEach()
.
Ali mislim da ostaju pomalo nejasni, posebno za početnike. Jer oboje rade iteraciju i nešto daju na izlaz. Pa, u čemu je razlika?
U ovom ćemo članku pogledati sljedeće:
- Definicije
- Povratna vrijednost
- Sposobnost povezivanja drugih metoda
- Promjenjivost
- Brzina izvedbe
- Završne misli
Definicije
map
Postupak dobiva funkciju kao parametar. Zatim ga primjenjuje na svaki element i vraća potpuno novi niz popunjen rezultatima pozivanja pružene funkcije.
To znači da vraća novi niz koji sadrži sliku svakog elementa niza. Uvijek će vratiti isti broj predmeta.
const myAwesomeArray = [5, 4, 3, 2, 1] myAwesomeArray.map(x => x * x) // >>>>>>>>>>>>>>>>> Output: [25, 16, 9, 4, 1]
Slično tome map
, forEach()
metoda prima funkciju kao argument i izvršava je jednom za svaki element niza. Međutim, umjesto da vrati novi niz like map
, on se vraća undefined
.
const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.forEach(element => console.log(element.name)) // >>>>>>>>> Output : john // Ali // Mass
1. Povratna vrijednost
Prva razlika između map()
i forEach()
je povratna vrijednost. The forEach()
metoda vraća undefined
i map()
vraća novi niz s transformiranim elemenata. Čak i ako rade isti posao, povratna vrijednost ostaje različita.
const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.forEach(x => x * x) //>>>>>>>>>>>>>return value: undefined myAwesomeArray.map(x => x * x) //>>>>>>>>>>>>>return value: [1, 4, 9, 16, 25]
2. Sposobnost povezivanja drugih metoda
Druga razlika između ovih metoda niza je činjenica koja se map()
može povezati s lancima. To znači da možete priključiti reduce()
, sort()
, filter()
i tako dalje nakon izvođenja map()
metodu na polje.
To je nešto s čime ne možete forEach()
jer se, kao što pretpostavljate, vraća undefined
.
const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.forEach(x => x * x).reduce((total, value) => total + value) //>>>>>>>>>>>>> Uncaught TypeError: Cannot read property 'reduce' of undefined myAwesomeArray.map(x => x * x).reduce((total, value) => total + value) //>>>>>>>>>>>>>return value: 55
3. Promjenjivost
Općenito, riječ "mutirati" znači mijenjati, izmjenjivati, modificirati ili transformirati. I u svijetu JavaScript-a ima isto značenje.
Promjenjivi objekt je objekt čije se stanje može mijenjati nakon što se stvori. Dakle, što je s promjenjivošću forEach
i s map
obzirom na nju?
Pa, prema MDN dokumentaciji:
forEach()
ne mutira niz na kojem je pozvan. (Međutim, callback
može to učiniti).
map()
ne mutira niz na kojem je pozvan (iako to callback
može učiniti ako se pozove).
JavaScript je čudan .

Ovdje vidimo vrlo sličnu definiciju i svi znamo da oboje dobivaju callback
argument kao argument. Pa, tko se oslanja na nepromjenjivost?
Pa, po mom mišljenju, ova definicija ipak nije jasna. A da bismo znali koja ne mutira izvorni niz, prvo moramo provjeriti kako funkcioniraju ove dvije metode.
map()
Metoda vraća potpuno novi niz sa transformirane elementima i istu količinu podataka. U slučaju forEach()
, čak i ako se vrati undefined
, mutirat će izvorni niz znakom callback
.
Stoga jasno vidimo da se map()
oslanja na nepromjenjivost i da forEach()
je mutatorska metoda.
4. Brzina izvedbe
Što se tiče brzine izvedbe, oni su malo drugačiji. Ali, je li to važno? Pa, to ovisi o raznim stvarima poput vašeg računala, količini podataka s kojima imate posla itd.
Možete to sami provjeriti pomoću ovog primjera u nastavku ili pomoću jsPerfa da biste vidjeli što je brže.
const myAwesomeArray = [1, 2, 3, 4, 5] const startForEach = performance.now() myAwesomeArray.forEach(x => (x + x) * 10000000000) const endForEach = performance.now() console.log(`Speed [forEach]: ${endForEach - startForEach} miliseconds`) const startMap = performance.now() myAwesomeArray.map(x => (x + x) * 10000000000) const endMap = performance.now() console.log(`Speed [map]: ${endMap - startMap} miliseconds`)
Završne misli
Kao i uvijek, izbor između map()
i forEach()
ovisit će o vašem slučaju upotrebe. Ako planirate mijenjati, izmjenjivati ili koristiti podatke, trebali biste odabrati map()
, jer vraća novi niz s transformiranim podacima.
Ali, ako vam neće trebati vraćeni niz, nemojte koristiti map()
- umjesto toga koristite forEach()
ili čak for
petlju.
Nadamo se da će ovaj post razjasniti razlike između ove dvije metode. Ako ima više razlika, podijelite ih u odjeljku za komentare, inače hvala što ste ih pročitali.
Pročitajte više mojih članaka na mom blogu
Foto Franck V. na Unsplash