Razlike između forEach () i map () koje bi svaki programer trebao znati

Programiranje

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

mapPostupak 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 undefinedi 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 forEachi s mapobzirom na nju?

Pa, prema MDN dokumentaciji:

forEach()ne mutira niz na kojem je pozvan. (Međutim, callbackmože to učiniti).

map()ne mutira niz na kojem je pozvan (iako to callbackmože učiniti ako se pozove).

JavaScript je čudan .

Gif

Ovdje vidimo vrlo sličnu definiciju i svi znamo da oboje dobivaju callbackargument 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 forpetlju.

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