El Array.prototype.map() El método se introdujo en ES6 (ECMAScript 2015) para iterar y manipular elementos de una matriz de una sola vez. Este método crea una nueva matriz ejecutando la función dada para cada elemento de la matriz.
El Array.map() El método acepta una función de devolución de llamada como un parámetro que desea invocar para cada elemento de la matriz. Esta función debe devolver un valor después de realizar todas las modificaciones.
La devolución de llamada acepta hasta tres parámetros operativos. El primero es el elemento actual en la iteración, el segundo es el índice del elemento actual en la matriz y el tercero es la matriz misma.
Veamos el siguiente ejemplo:
const prices = [45, 9.99, 33, 50];
const updatedPrices = prices.map(price => '$' + price);
console.log(updatedPrices);
// ['$45', '$9.99', '$33', '$50']
Como puede ver arriba, usamos el map() función para iterar sobre una matriz de números y convertir sus elementos en cadenas anteponiendo un símbolo de moneda. El updatedPrices variable es una matriz recién creada con los resultados de ejecutar una función para cada elemento de la matriz principal.
Tenga en cuenta que el Array.map() es no mutante función, lo que significa que no cambia la matriz original y solo se basa en los resultados de la función proporcionada para crear una nueva matriz.
La gama de elementos procesados por el map() la función se decide antes la primera invocación. Si se agregan nuevos elementos a la matriz después del map() comienza, no serán procesados por la devolución de llamada.
Ejemplos
Además de iterar sobre todos los elementos de una matriz y transformarlos, el map() El método se puede utilizar para hacer más cosas. Veamos algunos ejemplos más a continuación.
Extracción de valores de una matriz de objetos
El map() El método es extremadamente útil para extraer valores de una matriz de objetos. Digamos que tiene la siguiente matriz JSON que contiene los nombres de los usuarios y sus edades:
const users = [
{
name: 'John Deo',
age: 35
},
{
name: 'Emma Kel',
age: 24
},
{
name: 'Kristy Adam',
age: 42
}
];
Aquí hay un ejemplo que usa map() para extraer todas las edades y devolverlas como una nueva matriz:
const ages = users.map(user => user.age);
console.log(ages);
// [35, 24, 42]
Transformar matriz de objetos
El map() El método se puede usar para iterar sobre todos los objetos en una matriz, transformar el contenido de cada objeto individual y devolver una nueva matriz. Aquí hay un ejemplo:
const modifiedUsers = users.map(user => {
// assign a random color to each user
user.color = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
// return modified user
return user;
});
console.log(modifiedUsers);
// [
// { name: 'John Deo', age: 35, color: '#f76f4b' },
// { name: 'Emma Kel', age: 24, color: '#e05341' },
// { name: 'Kristy Adam', age: 42, color: '#48242c' }
// ]
Conclusión
El Array.map() El método en JavaScript se usa para iterar sobre todos los elementos de una matriz y crea una nueva matriz. Aquí hay algunas cosas que debe recordar sobre Array.map() :
- Llama a la función provista para cada elemento en una matriz y devuelve una nueva matriz.
- No modifica el contenido de la matriz original y solo crea una nueva matriz con los valores devueltos por la función invocada.
- Nuevos elementos agregados a la matriz después del
map()la función comienza no se procesan.
El Array.map() El método funciona en todos los navegadores modernos e Internet Explorer 9 y superior. Puede usar un polyfill para admitir IE6 y superior.
Eche un vistazo a este artículo para obtener más información sobre las matrices de JavaScript y sus métodos.