Erinevused igaühe () ja kaardi () vahel, mida iga arendaja peaks teadma

Javascriptil on mõned käepärased meetodid, mis aitavad meil massiivide kaudu korduda. Kaks kõige sagedamini iteratsiooni jaoks on Array.prototype.map()ja Array.prototype.forEach().

Kuid arvan, et need jäävad natuke ebaselgeks, eriti algajale. Sest mõlemad teevad iteratsiooni ja väljastavad midagi. Niisiis, mis on erinevus?

Selles artiklis uurime järgmist:

  • Mõisted
  • Tagasiväärtus
  • Võime aheldada muid meetodeid
  • Muutlikkus
  • Performance Speed
  • Lõpumõtted

Mõisted

mapMeetodit saab funktsiooni parameetrina. Seejärel rakendab see seda igale elemendile ja tagastab täiesti uue massiivi, mis on täidetud pakutava funktsiooni kutsumise tulemustega.

See tähendab, et see tagastab uue massiivi, mis sisaldab massiivi iga elemendi pilti. See tagastab alati sama arvu üksusi.

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

Nagu mapon forEach()meetod saab funktsiooni argumendina ja täidab seda üks kord iga massiivi element. Kuid selle asemel, et uus massiiv tagastada map, naaseb see 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. Tagasiväärtus

Esimene erinevus map()ja forEach()väärtus on tagastatav väärtus. forEach()Meetod tagastab undefinedja map()naaseb uue massiivi transformeeritud elemente. Isegi kui nad teevad sama tööd, jääb tagastatav väärtus erinevaks.

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. Võime aheldada muid meetodeid

Teine erinevus nende massiivimeetodite vahel on asjaolu, mis map()on aheldatav. See tähendab, et võite lisada reduce(), sort(), filter()ja nii edasi pärast sooritades map()meetod massiivi.

See on asi, mida te ei saa teha, forEach()sest nagu võite arvata, see naaseb 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. Muutlikkus

Üldiselt tähendab sõna "muteerumine" muutmist, asendamist, muutmist või teisendamist. Ja JavaScripti maailmas on see sama tähendus.

Muutuv objekt on objekt, mille olekut saab pärast selle loomist muuta. Kuidas on siis muutlikkusega forEachja sellega mapseoses?

Noh, vastavalt MDN-i dokumentatsioonile:

forEach()ei muteeri massiivi, millele seda kutsutakse. ( callbackVõib siiski teha).

map()ei muteeri massiivi, millele seda kutsutakse (kuigi callbackkui seda kutsutakse, võib seda ka teha).

JavaScript on imelik .

Gif

Siin näeme väga sarnast määratlust ja me kõik teame, et mõlemad saavad callbackargumendina tähise a . Niisiis, kumb tugineb muutumatusele?

Noh, minu arvates pole see määratlus siiski selge. Ja et teada saada, mis ei muteeri algset massiivi, peame kõigepealt kontrollima, kuidas need kaks meetodit toimivad.

map()Meetod tagastab täiesti uue massiivi transformeerunud elemendid ja sama palju andmeid. forEach()Isegi juhul , kui see naaseb undefined, muteerib see algse massiivi tähisega callback.

Seetõttu näeme selgelt, et map()tugineb muutumatusele ja forEach()on mutatsioonimeetod.

4. Esinemiskiirus

Jõudluskiiruse osas on need veidi erinevad. Aga kas see on oluline? Noh, see sõltub erinevatest asjadest, näiteks arvutist, andmehulgast, millega tegelete jne.

Saate seda ise kontrollida selle allpool toodud näite või jsPerfi abil, et näha, mis on kiirem.

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

Lõpumõtted

Nagu alati, sõltub valik map()ja forEach()kasutusviis teie vahel. Kui kavatsete andmeid muuta, alternatiivseid andmeid kasutada või neid kasutada, peaksite valima map(), sest see tagastab teisendatud andmetega uue massiivi.

Kuid kui te ei vaja tagastatavat massiivi, ärge kasutage map()- kasutage forEach()hoopis forsilmi.

Loodetavasti selgitab see postitus nende kahe meetodi erinevused. Kui erinevusi on veel, jagage neid kommentaaride jaotises, vastasel juhul aitäh selle lugemise eest.

Loe rohkem minu artikleid oma ajaveebist

Foto Franck V. saidil Unsplash