Den ultimative guide til JavaScript Array Methods - Map

Den map()metode anvendes en funktion til hvert element i et array og returnerer en kopi af det oprindelige array med ændrede værdier (hvis nogen).

Syntaks:

const newArr = oldArr.map(function(currentValue, index, array) { // Do stuff with currentValue (index and array are optional) });
  • newArr - det nye array, der returneres
  • oldArr- det gamle array, der opereres. Denne matrix ændres ikke
  • currentValue - den aktuelle værdi, der behandles
  • index - det aktuelle indeks for den værdi, der behandles
  • array - den oprindelige matrix

Eksempler:

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

På overfladen, det map()og forEach()fremgangsmåder er meget ens. Begge metoder gentages gennem en matrix og anvender en funktion til hvert element. Den største forskel er, at det map()returnerer et nyt array, mens forEach()det ikke returnerer noget.

Så hvilken metode skal du bruge? Generelt er det bedre at bruge, forEach()hvis du ikke har brug for at ændre værdierne i det originale array. forEach()er et godt valg, hvis alt hvad du skal gøre er at logge hvert element i et array på konsollen eller gemme dem i en database:

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

map()er et bedre valg, hvis du har brug for at opdatere værdierne i det originale array. Det er især nyttigt, hvis du vil gemme det opdaterede array som en variabel og beholde originalen som reference.

Sådan bruges det mapmed andre matrixmetoder

Da du map()returnerer en matrix, kan du bruge den med andre matrixmetoder for at gøre din kode meget mere kortfattet og læsbar.

Brug mapmedfilter

En ting at huske, mens du bruger, map()er at den anvender en funktion på hvert element i det originale array og returnerer et nyt array i samme længde som det gamle. Med andre ord er det ikke muligt at springe over elementer i arrayet, som du ikke vil ændre:

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

Det er her, filter()metoden kommer ind. filter()Returnerer et nyt array af filtrerede elementer, der opfylder en bestemt betingelse, som du derefter kan kæde map()til:

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

Denne kode kan forenkles yderligere:

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

Brug mapmedreverse

Der kan være tidspunkter, hvor du har brug for at vende et array, mens du kortlægger det. Den reverse()metode gør det let, men det er vigtigt at huske, at mens map()er uforanderlige, reverse()er det ikke. Med andre ord vil reverse()metoden ændre det originale array:

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]

En af de største fordele ved map()er, at det ikke ændrer det originale array, og at bruge reverse()sådan dette besejrer formålet. Dette er dog en simpel løsning - husk bare at bruge map()først, så reverse()det nye array, det returnerer:

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]

Brug mappå et objekt

Mens det map()er beregnet til drift på arrays, kan du med bare lidt ekstra arbejde også gentage gennem objekter. Object.keys(),, Object.values()og Object.entries()alle returnerer et array, hvilket betyder, at det map()let kan lænkes til hver metode:

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

Gå nu ud og map()alle tingene!