Végső útmutató a JavaScript tömb módszerekhez - Térkép

A map()módszer egy függvényt alkalmaz egy tömb minden elemére, és visszaadja az eredeti tömb másolt értékű másolatát (ha van ilyen).

Szintaxis:

const newArr = oldArr.map(function(currentValue, index, array) { // Do stuff with currentValue (index and array are optional) });
  • newArr - a visszaküldött új tömb
  • oldArr- a régi tömböt működtetik. Ez a tömb nem változik
  • currentValue - a feldolgozás alatt álló aktuális érték
  • index - a feldolgozott érték aktuális indexe
  • array - az eredeti tömb

Példák:

ES5

var arr = [1, 2, 3, 4]; var newArray = arr.map(function(element) { return element * 2 }); console.log(arr); // [1, 2, 3, 4] console.log(newArray); // [2, 4, 6, 8]

ES6

const arr = [1, 2, 3, 4]; const newArray = arr.map(element => { return element * 2; }); const newArrayOneLiner = arr.map(element => element * 2); console.log(arr); // [1, 2, 3, 4] console.log(newArray); // [2, 4, 6, 8] console.log(newArrayOneLiner); // [2, 4, 6, 8]

map vs. forEach

A felszínen a map()és a forEach()módszerek nagyon hasonlóak. Mindkét módszer egy tömbön keresztül iterál és függvényt alkalmaz minden elemre. A fő különbség az, hogy map()új tömböt ad vissza, miközben forEach()nem ad vissza semmit.

Tehát melyik módszert használja? Általában jobb használni, forEach()ha nem kell megváltoztatnia az eredeti tömb értékeit. forEach()jó választás, ha csak egy tömb minden elemét be kell jegyeznie a konzolra, vagy el kell mentenie azokat egy adatbázisba:

const letters = ['a', 'b', 'c', 'd']; letters.forEach(letter => { console.log(letter); });

map()jobb választás, ha frissítenie kell az eredeti tömb értékeit. Különösen hasznos, ha a frissített tömböt változóként szeretné tárolni, és az eredetit referenciaként megtartaná.

Hogyan használható mapmás tömb módszerekkel

Mivel map()egy tömböt ad vissza, más tömb módszerekkel is használhatja, hogy a kód sokkal tömörebb és olvashatóbb legyen.

használata mapafilter

A használat során map()nem szabad megfeledkezni arról, hogy egy függvényt alkalmaz az eredeti tömb minden elemére, és a régiéval megegyező hosszúságú új tömböt ad vissza. Más szavakkal, nem lehet átugrani a tömb olyan elemeit, amelyeket nem akar módosítani:

const nums = [5, 10, 15, 20]; const doublesOverTen = nums.map(num => { if (num > 10) { return num * 2; } }); console.log(doublesOverTen); // [undefined, undefined, 30, 40]

Ekkor filter()jön be a módszer. filter()Egy bizonyos feltételnek megfelelő szűrt elemek új tömbjét adja vissza, amelyet aztán láncolhat map():

const nums = [5, 10, 15, 20]; const doublesOverTen = nums.filter(num => { return num > 10; }).map(num => { return num * 2; }); console.log(doublesOverTen); // [30, 40]

Ez a kód még tovább egyszerűsíthető:

const nums = [5, 10, 15, 20]; const doublesOverTen = nums.filter(num => num > 10).map(num => num * 2); console.log(doublesOverTen); // [30, 40]

használata mapareverse

Előfordulhat, hogy egy tömböt meg kell fordítania, miközben rajta térképez. A reverse()módszer megkönnyíti ezt, de fontos megjegyezni, hogy bár map()változhatatlan, reverse()nem az. Más szavakkal, a reverse()módszer megváltoztatja az eredeti tömböt:

const nums = [1, 2, 3, 4, 5]; const reversedDoubles = nums.reverse().map(num => num * 2); console.log(nums); // [5, 4, 3, 2, 1] console.log(reversedDoubles); // [10, 8, 6, 4, 2]

Az egyik fő előnye, map()hogy nem változtatja meg az eredeti tömböt, és az ehhez reverse()hasonló használat megsemmisíti a célt. Ez azonban egy egyszerű javítás - csak ne felejtse el map()először használni , majd reverse()az általa visszaadott új tömböt:

const nums = [1, 2, 3, 4, 5]; const reversedDoubles = nums.map(num => num * 2).reverse(); console.log(nums); // [1, 2, 3, 4, 5] console.log(reversedDoubles); // [10, 8, 6, 4, 2]

Használat mapegy objektumon

Míg map()tömbök üzemeltetésére szolgál, csak egy kis plusz munkával az objektumokon keresztül is iterálhat. Object.keys(),, Object.values()és Object.entries()mindegyik egy tömböt ad vissza, vagyis map()könnyen láncolható az egyes módszerekhez:

const obj = { a: 1, b: 2, c: 3 } const doubles = Object.values(obj).map(num => num * 2); console.log(doubles); // [2, 4, 6]

Most menjetek elő és map()minden dolog!