A JavaScript rendelkezik néhány praktikus módszerrel, amelyek segítenek a tömbjeink iterálásában. A két leggyakrabban használt iteráció a Array.prototype.map()és Array.prototype.forEach().

De azt gondolom, hogy kissé tisztázatlanok maradnak, különösen egy kezdő számára. Mert mindketten elvégeznek egy iterációt és kiadnak valamit. Mi a különbség?

Ebben a cikkben a következőket vizsgáljuk meg:

• Definíciók
• A visszatérő érték
• Képesség láncolni más módszereket
• Változtathatóság
• Teljesítmény sebesség
• Végső gondolatok

Definíciók

A mapmódszer függvényt kap paraméterként. Ezután minden elemre alkalmazza, és egy teljesen új tömböt ad vissza, feltöltve a megadott függvény meghívásának eredményeivel.

Ez azt jelenti, hogy új tömböt ad vissza, amely a tömb minden elemének képét tartalmazza. Mindig ugyanannyi elemet fog visszaadni.

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

Hasonlóan map, a forEach()metódus argumentumként kap függvényt, és minden tömb elemnél egyszer végrehajtja. Azonban ahelyett, hogy új tömböt adna mapvissza, visszatér 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. A visszatérő érték

Az első különbség map()és forEach()a visszatérő érték. A forEach()metódus visszatér undefinedés map()egy új tömböt ad vissza az átalakított elemekkel. Még akkor is, ha ugyanazt a munkát végzik, a visszatérő érték más marad.

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. Képesség láncolni más módszereket

A második különbség e tömb módszerek között az a tény, hogy map()láncolható. Ez azt jelenti, hogy csatolja reduce(), sort(), filter()és így tovább elvégzése után a map()módszer egy tömbben.

Ezt nem lehet megtenni, forEach()mert, mint sejteni lehet, visszatér 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. Változtathatóság

Általában a "mutáció" szó változást, váltakozást, módosítást vagy átalakulást jelent. És a JavaScript-világban ugyanaz a jelentése.

A mutálható objektum olyan objektum, amelynek állapota létrehozása után módosítható. Szóval, mi a helyzet a mutabilitással forEachés mapa mutabilitással kapcsolatban?

Nos, az MDN dokumentációja szerint:

forEach()nem mutálja a tömböt, amelyre hívják. ( callbackMegteheti azonban ).

map()nem mutálja a tömböt, amelyen hívják (bár callbackha meghívják, megteheti).

A JavaScript furcsa .

Itt egy nagyon hasonló definíciót látunk, és mindannyian tudjuk, hogy mindkettő callbackérvként kap egy- egy. Tehát melyik támaszkodik a változhatatlanságra?

Nos, véleményem szerint ez a meghatározás nem világos. És ahhoz, hogy tudjuk, melyik nem mutálja az eredeti tömböt, először meg kell vizsgálnunk, hogy működik ez a két módszer.

A map()módszer egy teljesen új tömböt ad vissza transzformált elemekkel és ugyanannyi adattal. Abban az esetben is forEach(), ha visszatér undefined, akkor az eredeti tömböt a -val mutálja callback.

Ezért világosan látjuk, hogy a változtathatatlanságra map()támaszkodik, és forEach()mutáns módszer.

4. Teljesítmény sebessége

A teljesítmény sebességét tekintve kissé eltérnek egymástól. De számít? Nos, ez különböző dolgoktól függ, például a számítógéptől, az adatmennyiségtől, amellyel foglalkozik, stb.

Saját maga is ellenőrizheti az alábbi példával, vagy a jsPerf segítségével, hogy melyik a gyorsabb.

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

Végső gondolatok

Mint mindig, a map()és a választás forEach()a felhasználási esettől függ. Ha az adatok megváltoztatását, váltogatását vagy felhasználását tervezi, akkor válassza ki map(), mert az új tömböt ad vissza az átalakított adatokkal.

De, ha nem lesz szüksége a visszaküldött tömbre, ne használja map()- inkább használja, forEach()vagy akár egy forciklust.

Remélhetőleg ez a bejegyzés tisztázza a két módszer közötti különbségeket. Ha több különbség van, kérjük, ossza meg őket a megjegyzés részben, különben köszönöm, hogy elolvasta.

Olvasson további cikkeket a blogomon

Fotó: V. Franck az Unsplash-on