Versión inglesa: https://www.javascripttutorial.net/javascript-array-map/

A veces es necesario tomar una matriz, transformar sus elementos e incluir los resultados en una nueva matriz.

Normalmente, usaría un bucle forpara iterar sobre los elementos, transformando cada uno individualmente y enviando los resultados a una nueva matriz.

Veamos un ejemplo.

Suponga que tiene una matriz de números donde cada elemento representa el radio de un círculo de la siguiente manera:

A continuación, mostramos cómo calcular el área de cada círculo y enviar el resultado a una nueva matriz.

Resultado:

Se necesita una cantidad considerable de código para hacer esto, pero tenga en cuenta que es posible hacerlo de manera diferente usando mucho menos código.

A partir de ES5, el tipo de matriz de JavaScript proporciona el método map()que le permite transformar los elementos de una matriz de una manera más limpia y más corta que usando el bucle for.

Resultado:

Comprenda cómo funciona este código:

• Primero, defina una función que calcule el área de un círculo.
• Luego, pase la función circleAreaal método map. El método map()llamará a la función circleAreaen cada elemento de la matriz circlesy devolverá una nueva matriz con los elementos que se han transformado.

Además, puede usar la función de flecha de ES6 para lograr el mismo resultado con un código más limpio:

Detalles del método Map ()

Sintaxis:

El método map()llama a una función de devolución de llamada callbacken todos los elementos de una matriz y devuelve una nueva matriz que contiene los resultados.

El método map()toma dos argumentos con nombre, el primero es obligatorio, el segundo es opcional.

Similar a otros métodos iterativos, tales como every(), some(), filter(), forEach()y sort()la función callback()tiene la siguiente forma:

La función callbacktiene 3 argumentos:

• El argumento currentElementes el elemento actual de la matriz que está procesando la función callback. Este argumento es obligatorio.
• El indexde currentElementser procesado por la función callback.
• Objeto arrayatravesado.

El argumento del contexObjectmétodo map()es opcional. Si pasa este valor, puede hacer referencia a él utilizando la palabra clave thisdentro de la función callback.

Es importante tener en cuenta que el método filter()no cambia la matriz original. Crea una nueva matriz de todos los elementos que han sido transformados por la función callback.

Ejemplos de map ()

El siguiente ejemplo muestra cómo transformar una matriz de números usando el método interno de tipo Mathen función de callback:

Resultado:

La nueva matriz contiene las raíces cuadradas de los números de la matriz numbers.

En este tutorial, aprendió a usar el método map()para transformar elementos de una matriz de acuerdo con una función proporcionada.

Ver el índice de todos los tutoriales de JavaScript

Tutoriales de JavaScript