Eroa jokaiselle () ja kartalle (), jotka jokaisen kehittäjän tulisi tietää

JavaScriptillä on joitain käteviä menetelmiä, jotka auttavat meitä iteroimaan taulukoiden kautta. Kaksi yleisimmin käytettyä iterointia ovat Array.prototype.map()ja Array.prototype.forEach().

Mutta luulen, että ne ovat edelleen hieman epäselviä, etenkin aloittelijoille. Koska molemmat tekevät iteroinnin ja tuottavat jotain. Joten, mikä on ero?

Tässä artikkelissa tarkastellaan seuraavaa:

  • Määritelmät
  • Palautusarvo
  • Kyky ketjuttaa muita menetelmiä
  • Muutettavuus
  • Suorituskyky
  • Lopulliset ajatukset

Määritelmät

mapMenetelmä saa funktio parametrina. Sitten se soveltaa sitä jokaiseen elementtiin ja palauttaa kokonaan uuden taulukon, joka on täytetty saadun toiminnon kutsumisen tuloksilla.

Tämä tarkoittaa, että se palauttaa uuden taulukon, joka sisältää kuvan jokaisesta taulukon elementistä. Se palauttaa aina saman määrän tuotteita.

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

Kuten map, forEach()menetelmä saa funktiota argumenttina ja suorittaa sen jälkeen, kun kunkin ryhmän elementin. Sen sijaan, että palautaisi uuden tyyppisen taulukon map, se palaa 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. Palautusarvo

Ensimmäinen ero map()ja forEach()arvo on palaava arvo. forEach()Menetelmä palaa undefinedja map()palaa uuden array transformoitujen elementtejä. Vaikka he tekisivät saman työn, paluuarvo on erilainen.

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. Kyky ketjuttaa muita menetelmiä

Toinen ero näiden matriisimenetelmien välillä on se, että se map()on ketjutettavissa. Tämä tarkoittaa, että voit liittää reduce(), sort(), filter()ja niin edelleen suorittamisen jälkeen map()menetelmällä jono.

Sitä ei voi tehdä, forEach()koska, kuten arvata saattaa, se palaa 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. Muutettavuus

Yleensä sana "mutaatio" tarkoittaa muutosta, vuorottelua, muokkaamista tai muuntamista. Ja JavaScript-maailmassa sillä on sama merkitys.

Muokattava objekti on objekti, jonka tilaa voidaan muokata sen luomisen jälkeen. Joten, entä forEachja mapkoskien mutability?

No, MDN-dokumentaation mukaan:

forEach()ei mutatoi taulukkoa, johon sitä kutsutaan. ( callbackVoi kuitenkin tehdä niin).

map()ei mutatoi taulukkoa, johon sitä kutsutaan (vaikka callbackjos sitä käytetään, se voi tehdä niin).

JavaScript on outo .

Gif

Täällä näemme hyvin samanlaisen määritelmän, ja me kaikki tiedämme, että molemmat saavat callbackargumentin a. Joten kumpi luottaa muuttumattomuuteen?

No, mielestäni tämä määritelmä ei ole kuitenkaan selkeä. Ja jotta voimme tietää, mikä ei muuta alkuperäistä taulukkoa, meidän on ensin tarkistettava, miten nämä kaksi menetelmää toimivat.

map()Menetelmä palaa täysin uusi array transformoitu elementtejä ja saman määrän tietoa. Siinä tapauksessa forEach(), että se palaa undefined, se mutatoi alkuperäisen taulukon callback.

Siksi näemme selvästi, että map()luottaa muuttumattomuuteen ja forEach()on mutaattorimenetelmä.

4. Suorituskyky

Suorituskyvyn suhteen ne ovat hieman erilaisia. Mutta onko sillä väliä? No, se riippuu useista asioista, kuten tietokoneestasi, käsittelemiesi tietojen määrästä ja niin edelleen.

Voit tarkistaa sen itse alla olevalla esimerkillä tai jsPerfillä nähdäksesi, mikä on nopeampi.

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

Lopulliset ajatukset

Kuten aina, valinta map()ja forEach()riippuu käyttötapauksestasi. Jos aiot vaihtaa, vaihtaa tietoja tai käyttää tietoja, sinun on valittava map(), koska se palauttaa uuden taulukon muunnettujen tietojen kanssa.

Mutta jos et tarvitse palautettua taulukkoa, älä käytä map()- vaan käytä forEach()tai edes forsilmukkaa.

Toivottavasti tämä viesti selvittää näiden kahden menetelmän väliset erot. Jos eroja on enemmän, jaa ne kommenttiosassa, muuten kiitos, että lukit sen.

Lue lisää artikkeleistani blogistani

Kuva Franck V. on Unsplash