Desde el método clásico forloop
al método forEach()
, se utilizan varias técnicas y métodos para iterar a través de conjuntos de datos en JavaScript. Uno de los métodos más populares es el método .map()
. ,map()
crea una matriz a partir de la invocación de una función específica sobre cada elemento de la matriz principal. .map()
es un método sin mutación que crea una nueva matriz en vez de los métodos con mutación, que solo realizan cambios a la matriz que invoca.
Este método puede tener muchos usos cuando se trabaja con matrices. En este tutorial, verá cuatro usos notales de .map()
en JavaScript: invocar una función de elementos de matriz, convertir cadenas a matrices, renderizar listas en bibliotecas y cambiar el formato de los objetos de una matriz.
Este tutorial no requiere codificación, pero si está interesado en seguir los ejemplos, puede usar el Node.js REPL o las herramientas del desarrollador del navegador.
Para instalar Node.js localmente, puede seguir los pasos en Cómo instalar Node.js y crear un entorno de desarrollo local.
Chrome DevTools está disponible descargando e instalando la versión más recientes de Google Chrome.
.map()
acepta una función de invocación como uno de sus argumentos, y un parámetro importante de esa función es el valor actual del elemento que procesa la función. Este es un parámetro requerido. Con este parámetro, puede modificar cada elemento en una matriz y crear una nueva función.
Aquí tiene un ejemplo:
const sweetArray = [2, 3, 4, 5, 35]
const sweeterArray = sweetArray.map(sweetItem => {
return sweetItem * 2
})
console.log(sweeterArray)
Este resultado se registra en la consola:
Output[ 4, 6, 8, 10, 70 ]
Esto se puede simplificar algo más para que esté más limpio con:
// create a function to use
const makeSweeter = sweetItem => sweetItem * 2;
// we have an array
const sweetArray = [2, 3, 4, 5, 35];
// call the function we made. more readable
const sweeterArray = sweetArray.map(makeSweeter);
console.log(sweeterArray);
Este resultado se registra en la consola:
Output[ 4, 6, 8, 10, 70 ]
Tener un código como sweetArray.map(makeSweeter)
hace que su código sea un poco más legible…
.map()
se conoce como que pertenece al prototipo de matriz. En este paso, lo usará para convertir una cadena a una matriz. No está desarrollando el método para trabajar para cadenas aquí. En vez de eso usará el método especial .call()
.
Todo en JavaScript es un objeto, y los métodos son funciones asociadas con estos objetos. .call()
permite usar el contexto de un objeto sobre otro. Por tanto, estaría copiando el contexto de .map()
en una matriz sobre una cadena.
Es posible pasar argumentos a .call()
del contexto que se va a utilizar y los parámetros de los argumentos de la función original.
Aquí tiene un ejemplo:
const name = "Sammy"
const map = Array.prototype.map
const newName = map.call(name, eachLetter => {
return `${eachLetter}a`
})
console.log(newName)
Este resultado se registra en la consola:
- Output[ "Sa", "aa", "ma", "ma", "ya" ]
Aquí utilizó el contexto de .map()
de una cadena y pasó un argumento de la función que .map()
espera.
Esto funciona como el método .split()
de una cadena, solo que cada carácter individual de la cadena puede modificarse antes de ser devuelto en una matriz.
Las bibliotecas JavaScript como React utilizan .map()
para renderizar elementos en una lista. Esto requiere sintaxis JSX ya que el método .map()
está envuelto en la sintaxis JSX.
Aquí tiene un ejemplo de un componente de React:
import React from "react";
import ReactDOM from "react-dom";
const names = ["whale", "squid", "turtle", "coral", "starfish"];
const NamesList = () => (
<div>
<ul>{names.map(name => <li key={name}> {name} </li>)}</ul>
</div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<NamesList />, rootElement);
Este es un componente sin estado en React, que renderiza un div
con una lista. Los elementos individuales de la lista se renderizan usando .map()
para iterar sobre la matriz de nombres creada inicialmente. Este componente se renderiza usando ReactDOM en el elemento DOM con Id
de root
.
.map()
puede usarse para iterar en objetos en una matriz y, de forma similar a las matrices tradicionales, modificar el contenido de cada objeto individual y devolver una nueva matriz. Esta modificación se realiza según lo que se devuelve en la función de callback.
Aquí tiene un ejemplo:
const myUsers = [
{ name: 'shark', likes: 'ocean' },
{ name: 'turtle', likes: 'pond' },
{ name: 'otter', likes: 'fish biscuits' }
]
const usersByLikes = myUsers.map(item => {
const container = {};
container[item.name] = item.likes;
container.age = item.name.length * 10;
return container;
})
console.log(usersByLikes);
Este resultado se registra en la consola:
Output[
{shark: "ocean", age: 50},
{turtle: "pond", age: 60},
{otter: "fish biscuits", age: 50}
]
Aquí ha modificado cada objeto en la matriz usando la notación paréntesis y punto. Este caso de uso puede emplearse para procesar o condensar los datos recibidos antes de guardarlos o analizarlos en una aplicación frontend.
En este tutorial hemos visto cuatro usos del método .map()
en JavaScript. En combinación con otros métodos, la funcionalidad de .map()
puede ampliarse. Para obtener más información, consulte el artículo Cómo usar métodos de matriz en métodos de iteración de JavaScript.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.