La guía definitiva para los métodos de matriz de JavaScript: mapa

El map()método aplica una función a cada elemento de una matriz y devuelve una copia de la matriz original con valores modificados (si los hay).

Sintaxis:

const newArr = oldArr.map(function(currentValue, index, array) { // Do stuff with currentValue (index and array are optional) });
  • newArr - la nueva matriz que se devuelve
  • oldArr- se está operando la matriz antigua. Esta matriz no se cambiará
  • currentValue - el valor actual que se está procesando
  • index - el índice actual del valor que se está procesando
  • array - la matriz original

Ejemplos:

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

En la superficie, los métodos map()y forEach()son muy similares. Ambos métodos iteran a través de una matriz y aplican una función a cada elemento. La principal diferencia es que map()devuelve una nueva matriz, mientras forEach()que no devuelve nada.

Entonces, ¿qué método deberías usar? Generalmente, es mejor usarlo forEach()si no necesita cambiar los valores en la matriz original. forEach()es una buena opción si todo lo que necesita hacer es registrar cada elemento de una matriz en la consola o guardarlos en una base de datos:

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

map()es una mejor opción si necesita actualizar los valores en la matriz original. Es especialmente útil si desea almacenar la matriz actualizada como una variable y mantener el original como referencia.

Cómo utilizar mapcon otros métodos de matriz

Dado que map()devuelve una matriz, puede usarla con otros métodos de matriz para hacer que su código sea mucho más conciso y legible.

Usando mapconfilter

Una cosa para recordar mientras se usa map()es que aplica una función a cada elemento de la matriz original y devuelve una nueva matriz de la misma longitud que la anterior. En otras palabras, no es posible omitir elementos de la matriz que no desea modificar:

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

Ahí es donde filter()entra el método. filter()Devuelve una nueva matriz de elementos filtrados que cumplen una determinada condición, que luego puede encadenar map()a:

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

Este código se puede simplificar aún más:

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

Usando mapconreverse

Puede haber ocasiones en las que necesite invertir una matriz mientras la asigna. El reverse()método lo hace fácil, pero es importante recordar que, aunque map()es inmutable, reverse()no lo es. En otras palabras, el reverse()método cambiará la matriz 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]

Una de las principales ventajas de map()es que no altera la matriz original, y su uso reverse()frustra el propósito. Sin embargo, esta es una solución simple, solo recuerde usar map()primero, luego reverse()la nueva matriz que devuelve:

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]

Usar mapen un objeto

Si bien map()está diseñado para operar en matrices, con solo un poco de trabajo adicional también puede iterar a través de objetos. Object.keys(), Object.values()y Object.entries()todos devuelven una matriz, lo que significa que map()se puede encadenar fácilmente a cada método:

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

¡Ahora adelante y map()todas las cosas!