Cómo usar .map() para iterar elementos de matriz en JavaScript

Introducción

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.

Requisitos previos

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.

Paso 1: Invocar una función en cada elemento en una matriz

.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…

Paso 2: Convertir una cadena en una matriz

.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.

Paso 3: Renderizar listas en bibliotecas JavaScript

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.

Paso 4: Reformatear los objetos de la matriz

.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.

Conclusión

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.