map() metoda aplică o funcție fiecărui element dintr-o matrice și returnează o copie a matricei originale cu valori modificate (dacă există).

Sintaxă:

const newArr = oldArr.map(function(currentValue, index, array) {
  // Do stuff with currentValue (index and array are optional)
});
  • newArr – noua matrice care este returnată
  • oldArr – vechea matrice fiind operată. Această matrice nu va fi modificată
  • currentValue – valoarea curentă procesată
  • index – indicele curent al valorii procesate
  • array – matricea originală

Exemple:

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

La suprafață, map() și forEach() metodele sunt foarte asemănătoare. Ambele metode iterează printr-o matrice și aplică o funcție fiecărui element. Principala diferență este că map() returnează o nouă matrice, în timp ce forEach() nu returnează nimic.

Deci, ce metodă ar trebui să utilizați? În general, este mai bine să utilizați forEach() dacă nu este nevoie să modificați valorile din matricea originală. forEach() este o alegere bună dacă tot ce trebuie să faceți este să conectați fiecare element al unui tablou la consolă sau să le salvați într-o bază de date:

const letters = ['a', 'b', 'c', 'd'];

letters.forEach(letter => {
  console.log(letter);
});

map() este o alegere mai bună dacă trebuie să actualizați valorile din matricea originală. Este util mai ales dacă doriți să stocați matricea actualizată ca o variabilă și să păstrați originalul ca referință.

Cum se folosește map cu alte metode de matrice

De cand map() returnează o matrice, o puteți folosi cu alte metode de matrice pentru a vă face codul mult mai succint și mai ușor de citit.

Folosind map cu filter

Un lucru de reținut în timpul utilizării map() este că aplică o funcție la fiecare element al matricei originale și returnează o matrice nouă de aceeași lungime ca și cea veche. Cu alte cuvinte, nu este posibil să treceți peste elementele matricei pe care nu doriți să le modificați:

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

console.log(doublesOverTen); // [undefined, undefined, 30, 40]

Acolo este filter() metoda vine. filter() returnează o nouă matrice de elemente filtrate care îndeplinesc o anumită condiție, pe care apoi le puteți lanța map() la:

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

console.log(doublesOverTen); // [30, 40]

Acest cod poate fi simplificat și mai mult:

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

console.log(doublesOverTen); // [30, 40]

Folosind map cu reverse

S-ar putea să apară momente când trebuie să inversați o matrice în timp ce cartografiați prin ea. reverse() metoda simplifică acest lucru, dar este important să ne amintim asta map() este imuabil, reverse() nu este. Cu alte cuvinte, reverse() metoda va schimba matricea originală:

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]

Unul dintre principalele avantaje ale map() este că nu modifică matricea originală și folosind reverse() așa învinge scopul. Cu toate acestea, aceasta este o soluție simplă – nu uitați să o folosiți map() mai întâi, apoi reverse() noua matrice pe care o returnează:

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]

Folosind map pe un obiect

In timp ce map() este menit să funcționeze pe matrici, cu doar puțină muncă suplimentară pe care o puteți itera și prin obiecte. Object.keys(), Object.values(), și Object.entries() toți returnează o matrice, ceea ce înseamnă că map() poate fi ușor legat de fiecare metodă:

const obj = { 
  a: 1, 
  b: 2, 
  c: 3 
}
const doubles = Object.values(obj).map(num => num * 2);

console.log(doubles); // [2, 4, 6]

Acum du-te și map() toate lucrurile!