Forskellene mellem forEach () og kort (), som enhver udvikler bør kende

JavaScript har nogle praktiske metoder, som hjælper os med at gentage gennem vores arrays. De to mest anvendte til iteration er Array.prototype.map()og Array.prototype.forEach().

Men jeg tror, ​​at de forbliver en smule uklare, især for en nybegynder. Fordi de begge gør en iteration og output noget. Så hvad er forskellen?

I denne artikel ser vi på følgende:

  • Definitioner
  • Den returnerende værdi
  • Evne til at kæde andre metoder
  • Ændring
  • Ydeevnehastighed
  • Afsluttende tanker

Definitioner

Den mapmetode modtager en funktion som parameter. Derefter anvender det det på hvert element og returnerer et helt nyt array befolket med resultaterne af at kalde den leverede funktion.

Dette betyder, at det returnerer et nyt array, der indeholder et billede af hvert element i arrayet. Det returnerer altid det samme antal varer.

 const myAwesomeArray = [5, 4, 3, 2, 1] myAwesomeArray.map(x => x * x) // >>>>>>>>>>>>>>>>> Output: [25, 16, 9, 4, 1]

Ligesom map, den forEach()metode modtager en funktion som argument og udfører det en gang for hvert array element. I stedet for at returnere et nyt array som mapdet, vender det imidlertid tilbage 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. Returneringsværdien

Den første forskel mellem map()og forEach()er returværdien. De forEach()returnerer fremgangsmåden undefinedog map()returnerer en ny Array med de transformerede elementer. Selv hvis de gør det samme job, forbliver returværdien forskellig.

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. Evne til at kæde andre metoder

Den anden forskel mellem disse matrixmetoder er det faktum, at det map()kan kædes. Det betyder, at du kan vedhæfte reduce(), sort(), filter()og så videre efter at have udført en map()metode på et array.

Det er noget, du ikke kan gøre med forEach(), for som du måske gætter, vender det tilbage 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. Mutabilitet

Generelt betyder ordet "mutere" at ændre, skifte, ændre eller transformere. Og i JavaScript-verdenen har den samme betydning.

Et ændret objekt er et objekt, hvis tilstand kan ændres, efter det er oprettet. Så hvad med forEachog med maphensyn til mutabilitet?

I henhold til MDN-dokumentationen:

forEach()muterer ikke det array, det kaldes på. (Dog callbackkan gøre det).

map()muterer ikke det array, det kaldes på (selvom det callbackkan gøres, hvis det påberåbes).

JavaScript er underligt .

Gif

Her ser vi en meget lignende definition, og vi ved alle, at de begge modtager en callbacksom et argument. Så hvilken er afhængig af uforanderlighed?

Nå, efter min mening er denne definition dog ikke klar. Og for at vide, hvilke der ikke muterer den oprindelige matrix, skal vi først kontrollere, hvordan disse to metoder fungerer.

Den map()metode returnerer en helt ny opstilling med transformerede elementer og den samme mængde data. I tilfælde af forEach(), selvom den vender tilbage undefined, vil den mutere den oprindelige matrix med callback.

Derfor ser vi tydeligt, at det er map()afhængigt af uforanderlighed og forEach()er en mutatormetode.

4. Ydeevnehastighed

Med hensyn til ydeevnehastighed er de lidt forskellige. Men betyder det noget? Nå, det afhænger af forskellige ting som din computer, mængden af ​​data, du har at gøre med osv.

Du kan tjekke det ud alene med dette eksempel nedenfor eller med jsPerf for at se, hvilken der er hurtigere.

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`) 

Afsluttende tanker

Som altid afhænger valget mellem map()og forEach()af din brugssag. Hvis du planlægger at ændre, skifte eller bruge dataene, skal du vælge map(), fordi det returnerer et nyt array med de transformerede data.

Men hvis du ikke har brug for det returnerede array, skal du ikke bruge det map()- brug i stedet forEach()eller endda en forloop.

Forhåbentlig rydder dette indlæg forskellene mellem disse to metoder. Hvis der er flere forskelle, bedes du dele dem i kommentarsektionen, ellers tak for at have læst den.

Læs flere af mine artikler på min blog

Foto af Franck V. på Unsplash