Guía del método map() de JavaScript

Introducción

La iteración a través de secuencias se puede usar para acceder y mostrar elementos de la secuencia, pero más a menudo se hace para realizar una operación en cada uno o algunos de los elementos.

Notar: Aplicar una función a cada elemento de una secuencia y devolver el resultado transformado en una nueva secuencia se conoce como cartografíadonde cada elemento de la secuencia original, Excorresponde a un elemento potencialmente transformado de la nueva secuencia, Exi.

Como la mayoría de los lenguajes, JavaScript tiene una implementación eficiente del operación de tarjetay se integra en Array clasificar.

En esta guía aprenderá a trabajar con JavaScript map() método y cómo funciona, en ejemplos prácticos de código.

JavaScript mapa() Método

vamos a pasar por el for-loop sintaxis y ver cómo podemos aplicar ciertos métodos a cada elemento. Supongamos que tenemos un conjunto de puntajes y queremos agregar 5 puntos a cada uno para ayudar a aumentar los puntajes:

const mathScores = [39, 50, 45, 41, 50]; 
let newScores = [];
  
for (let i = 0; i < mathScores.length; i++) {
    newScores.push(mathScores[i] + 5);
}

console.log(newScores); 

En el código anterior, hemos iterado a través de la mathScores matriz, agregando 5 a cada miembro, luego empujando los nuevos puntajes hacia arriba newScores desplegar.

Este es un procedimiento bastante estándar, y bastante similar a lo que map() ¡Acaso!

los Array.map() El método itera sobre una matriz y aplica una función de devolución de llamada en cada elemento, devolviendo los elementos resultantes en una nueva matriz.

Sintaxis

La sintaxis del método es bastante simple:

const newArray = oldArray.map((currentValue, index, array)=>{
    
})

los index y array son opcionales y se pueden utilizar para acceder a la pista desde currentValue y la propia matriz original.

  • newArray - La nueva matriz regresó después de la map() se ha aplicado la función.
  • oldArray - Los map() funciona en la matriz original y no la modifica.
  • currentValue - El valor que el map() la función se está procesando en el paso Xdonde la función define lo que sucede en el paso X.
  • index - El índice de valor actual.
  • array - Un parámetro opcional que apunta a la matriz original.

Para una experiencia visual intuitiva, puede intentar guardar estos valores y devolver el original sin ningún cambio:

const mathScores = [39, 50, 45, 41, 50];
  
mathScores.map((currentValue, index, array) => {
    console.log('Current value:' + currentValue);
    console.log('Index:' + index);
    console.log('Array:' + array);
    return currentValue;
})
"Current value:39"
"Index:0"
"Array:39,50,45,41,50"
...
"Current value:50"
"Index:4"
"Array:39,50,45,41,50"

Como funciona mapa() ¿Trabajar?

los map() la función, para todos los efectos, necesita elementos para trabajar, pero si la matriz que está llamando map() on está vacío, solo devolverá una matriz vacía. Se puede utilizar con funciones de flecha o funciones regulares:

Antes de ES6, generalmente definía una devolución de llamada como:

const codes = [101, 201, 301, 303, 202];
let mathCodes = codes.map(function(code) {
    return `mth${code}`;
});
  
console.log(mathCodes); 

Sin embargo, con ES6, puede usar una función de flecha para hacer que el código sea más limpio:

const codes = [101, 201, 301, 303, 202]; 
let mathCodes = codes.map((code)=>{
    return `mth${code}`;
});
  
console.log(mathCodes); 

map() Ejemplos

Veamos algunos ejemplos de map() ¡Una función! Por ejemplo, calculemos la raíz cuadrada de cada número de la lista:

const numbers = [9, 36, 64, 144];
  
let squareRoots = numbers.map((number) => {
    return Math.sqrt(number);
});
  
console.log(squareRoots); 

O bien, podríamos asignar cada elemento a su longitud:

const names = ["Bilbo", "Gandalf", "Nazgul"];
let lengths = names.map((name) => name.length);
console.log(lengths); 

O bien, podríamos mapear cada objeto de estudiante a su nombre y apellido:

const students = [
    {firstName : "John", lastName: "Doe"},
    {firstName : "Stephen", lastName: "Matt"},
    {firstName : "Abigail", lastName: "Susu"}
];
  
let studentsNames = students.map(student => {
      return `${student.firstName} ${student.lastName}`;
})
  
console.log(studentsNames); 

Uno de los casos de uso más comunes para el map() La función en el front-end es envolver los datos en HTML:

let cont = document.getElementById('#container');
  
let users = [
    { firstName : "John", lastName: "Doe", age: 17 },
    { firstName : "Stephen", lastName: "Matt", age: 16 },
    { firstName : "Abigail", lastName: "Susu", age: 15 }
];
  
let singleUser = users.map((user)=>{
    
    let fullName = user.firstName + ' ' + user.lastName;
    return `
      <h3 class="name">${fullName}</h3>
      <p class="age">${user.age}</p>
    `
});
  
container.innerHTML = singleUser;

mapa() ¿Vs otros métodos de iterador?

Consulte nuestra guía útil y práctica para aprender Git, con las mejores prácticas, los estándares aceptados por la industria y la hoja de trucos incluida. Deja de buscar en Google los comandos de Git y, de hecho, aprender ¡esta!

map() es un ejemplo de un método iterador en JavaScript, y es muy útil para comprender cuándo desea usar qué método iterador. Los métodos iterativos le permiten recorrer todos los objetos en una matriz para realizar operaciones específicas.

Al decidir si usar o no el map() función, es una buena idea considerar si otra técnica de iterador podría ser preferible.

Estos son algunos de los métodos iterativos adicionales disponibles en JavaScript:

  • reducir(): Las operaciones de reducción son una de las operaciones más poderosas en la programación funcional y generalmente involucran reducir un vector a un escalar (una lista de valores, a uno solo). Esta puede consistir en sumar todos los valores de un arreglo, encontrar el promedio, el mínimo o el máximo, o de cualquier otra forma reducir un conjunto de datos más largo a uno más pequeño, tomado del original.
  • filtrado(): el filtrado le permite filtrar los elementos de una lista que no coinciden con algunos criterios específicos y devolver una matriz de los elementos restantes que coinciden.
  • para cada(): Similar a un for...loop, forEach() realiza una función en cada elemento de una lista. Le permite recorrer una matriz y realizar trabajos en cada elemento.

Hasta cierto punto, esto plantea la pregunta:

Cuál es la diferencia entre map() y forEach()?

mapa () versus forEach ()

Dado que ambos métodos se ejecutan en una matriz y se utilizan para aplicar una función a cada miembro, el map() y forEach() los métodos pueden parecer extremadamente similares.

La principal diferencia entre estos dos métodos es que el map() la función devuelve una nueva pinturamientras que la forEach() el método no funciona - es modificar la tabla original.

Además, en cada iteración del map() función, tú return un elemento transformado. Con forEach(), no los devuelve, pero puede realizar funciones en estos elementos de edición en el lugar. Sin embargo, ¡ni siquiera necesita realizar una función en el elemento!

Esto hace forEach() preferible cuando se trata, por ejemplo, de registrar valores, sin modificarlos:

const characters = ['z', 'y', 'x', 'w'];
  
characters.forEach(character => {
    console.log(character);
});

Mientras que si tu objetivo es cambiar elementos, map() se prefiere.

Utilizando mapa() Con otros métodos de matriz

los map() proviene de la programación funcional, y con la programación funcional, los métodos de secuenciación son tan naturales como la respiración. El encadenamiento de operaciones funcionales es extremadamente común y puede proporcionar canalizaciones de operaciones muy complejas.

Vamos a ver cómo puedes encadenar map() con algunos otros métodos funcionales de la Array clasificar.

Utilizando mapa() con filtrado()

El filtrado suele ser la primera operación en una canalización, porque es ineficaz realizar operaciones en elementos que podrían no estar incluidos en el resultado, a menos que los criterios por los que está filtrando dependan de otra operación en la canalización.

Una secuencia común de pasos es filter() una matriz basada en un cierto criterio, entonces map() los elementos restantes.

Vamos a crear una matriz de estudiantes para filtrar y mapear:

const mathStudents = [
    {
      name: 'Jane',
      score: 60,
      enrollmentYear: 2019
    },
    {
      name: 'Emmy',
      score: 40,
      enrollmentYear: 2020
    },
    {
      name: 'John',
      score: 43,
      enrollmentYear: 2019
    },
    {
      name: 'Linda',
      score: 20,
      enrollmentYear: 2019
    }
]

Ahora filtremos a los estudiantes según su año, y obtengamos solo la generación anterior, luego mapeemos sus puntajes,

Asignaremos las puntuaciones a una calificación de "aprobado" https://stackabuse.com/"fails" para un formato más legible por humanos:

const passingStudents = mathStudents
    .filter((student) => student.enrollmentYear < 2020)
    .map((student) => {
      if (student.score > 40) {
        return student.name + ': passing'
      } else return student.name + ': not passing'
    });

console.log(passingStudents); 

Utilizando mapa() con contrarrestar()

Puede haber momentos en los que necesite invertir una matriz antes o después de realizar otras operaciones. Esto se puede hacer fácilmente usando el reverse() Una función:

const numbers = [21, 32, 43, 54, 65];
const newNumbers = numbers.map((number) => number * 2).reverse();
  
console.log(numbers); 
console.log(newNumbers); 

Hemos insertado el reverse() función al final del ciclo para que invierta la matriz resultante. Si tuviéramos que colocar el reverse() llamar antes map() llamada - en realidad invertiríamos la original matriz y el mapa de sus elementos, en lugar de invertir la nueva matriz resultante:

const numbers = [21, 32, 43, 54, 65];
const newNumbers = numbers.reverse().map((number) => number * 2);
  
console.log(numbers); 
console.log(newNumbers); 

Utilizando mapa() en un objeto

los map() La función también se puede usar en objetos después de obtener los valores, las claves o el par clave-valor mediante métodos estáticos de objetos (Object.keys(), Object.values()y Object.entries()). Dado que cada uno de estos métodos de objetos estáticos produce una matriz, map() puede ser simplemente encadenado a cada uno:

const scores = { math: 50, English: 70, Physics: 45, Agric: 60 };  
let newScores = Object.values(scores).map((score) => score + 5);
  
console.log(newScores); 

Conclusión

En esta guía, hemos visto los map() método en JavaScript.

El método itera a través de una matriz, aplica una función a cada elemento de la matriz y devuelve la nueva secuencia de elementos como una nueva matriz. Examinamos la sintaxis, los parámetros y el uso del método a través de ejemplos prácticos.

Además, comparamos el map() método con el forEach() y exploró cómo podemos encadenar map() con filter(), reverse() y objetos

Si quieres conocer otros artículos parecidos a Guía del método map() de JavaScript puedes visitar la categoría Código.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas