Mapa de JavaScript

Mapa de JavaScript
En este artículo, vamos a aprender uno de los métodos más utilizados para la matriz, que es el Método MAP (). El método del mapa ayuda a mapear matrices de acuerdo con nuestros requisitos. Veamos, ¿qué es un método map ()?? ¿Cuál es la sintaxis para mapear matrices usando el método map ()??

La matriz Método de mapa se utiliza para construir una nueva matriz asignada basada en el valor de retorno de la función de devolución de llamada para cada elemento.

var mappedArray = array.Mapa (CallbackFunction, This Value)

El llamar de vuelta es la función que se llamará cada vez para un solo elemento y devuelve un valor que se almacenará en una nueva matriz. La sintaxis para la función de devolución de llamada es

función (valor, [index [, array]])

valor es un argumento necesario, que en realidad es un solo elemento de la matriz.
El índice es un argumento opcional que se utilizará como índice de cada elemento en la función de devolución de llamada.
El formación es un argumento opcional también. Podemos aprobar este argumento si queremos usar la matriz en la función de devolución de llamada.

este valor es el valor que queremos pasar, que se utilizará como un "esto" en la función de devolución de llamada. De lo contrario, se aprobará "indefinido".

JavaScript proporciona el bucle for ... en bucle y foreach para iterar a través de elementos y manipular matrices. Pero, ¿por qué necesitamos un método de mapa aparte de eso?? Hay dos razones principales para eso. Uno es la separación de la preocupación y la segunda es la sintaxis fácil para hacer tales tareas. Entonces, intentemos algunos ejemplos diferentes para demostrar el propósito y el uso correcto de él.

Ejemplos

En primer lugar, vamos a tener una demostración simple en la que tenemos una simple variedad de números en los que intentaremos realizar cualquier operación aritmética simple en cada elemento.

var arr = [4, 8, 16, 64, 49];

Ahora, antes de aplicar el método del mapa a través de esta matriz. Primero escribiremos una función de devolución de llamada a la que podamos llamar a nuestra función de mapa en la que, digamos que queremos multiplicar cada elemento con 10 y tener una nueva matriz.

function multiply (elemento)
var newelement = elemento * 10;
devolver el novato;

Todo está configurado para aplicar el método del mapa sobre la matriz y tener los resultados requeridos.

var newarr = arr = arrr = arrry.mapa (multiplicar);

Ahora, si echamos un vistazo al "Newarr",

consola.log (newarr);

Podemos ver la última matriz mapeada en la salida según nuestro requisito.


Tenga esto en cuenta que la longitud de la nueva matriz mapeada definitivamente será igual a la matriz original.

Hay una forma más corta de hacer la misma tarea utilizando la flecha o la función anónima dentro de un método de mapa. Entonces, podemos escribir una función de devolución de llamada dentro de un método de mapa como este

var newarr = arr = arrr = arrry.map ((elemento) =>
Elemento de retorno * 10
)

O, si queremos ser un profesional y hacerlo más conciso. Podemos hacer esto

var newarr = arr = arrr = arrry.mapa (e => e * 10)

Está bien! Entonces, esta fue la demostración muy básica del método del mapa y diferentes formas de escribir la función de devolución de llamada. Pero, esta función es más útil, cuando estamos jugando con una variedad de objetos. Ahí es donde ocurre la verdadera implementación.

Usar mapa con una matriz de objetos

En este ejemplo, suponemos una matriz de objetos en el que cada objeto contiene la información de un jugador. El nombre del jugador y su identificación.

var arr = [
id: 12, nombre: "James",
id: 36, nombre: "Morgan",
id: 66, nombre: "Jordan"
];

Ahora, digamos que queremos extraer las ID de cada objeto y tener una nueva variedad de IDS.
Pero, para comprender, cómo el método del mapa es diferente y ayuda mejor que el bucle foreach. Intentaremos ambos (MAP Method y Foreach Loop) para hacer la misma tarea y aprender la diferencia.

Entonces, primero, intentaremos extraer ID utilizando el bucle foreach y luego usando el método de mapa.

var extraedids = [];
arrugado.foreach ((elemento) =>
devolver Extraedids.Push (elemento.identificación);
)

Ahora, si echamos un vistazo a las identificaciones extraídas.

consola.log (ExtraDIDID);


Los tenemos separados en una matriz. Pero, ahora demostremos la misma salida utilizando el método de mapa.

var extraedids = arr.map ((elemento) =>
elemento de retorno.identificación;
)
consola.log (ExtraDIDID);


Al observar la diferencia en el código y la misma salida, podemos darnos cuenta de la verdadera diferencia entre los dos métodos (foreach y map). La sintaxis y la separación de la preocupación.

Del mismo modo, podemos realizar muchas otras operaciones. Si tenemos que jugar y obtener algunos datos de la matriz de objetos. Suponemos que una matriz de objetos en los que cada objeto contiene dos propiedades: nombre y apellido.

var arr = [
FirstName: "John", LastName: "Doe",
FirstName: "Morgan", LastName: "Freeman",
FirstName: "Jordan", LastName: "Peterson"
];

Ahora, queremos tener una matriz que contenga los nombres completos. Entonces, escribiremos una función de mapa como esta para cumplir nuestro propósito

var fullName = arr.map ((persona) =>
devolución.primer nombre + " + persona.apellido
)
consola.log (FullName);


Como puede ver, tenemos una matriz separada con nombres completos. Genial.

Por lo tanto, estas son algunas de las formas básicas y diferentes de cómo se puede utilizar una función de mapa para cumplir con nuestros requisitos de desarrollo y ayuda en la vida de cada desarrollador de JavaScript.

Conclusión

En este artículo, hemos aprendido sobre el método MAP () más usado de JavaScript para matrices y hemos aprendido algunas de las diferentes formas de usar el método del mapa. Este artículo explica el concepto del método del mapa de una manera tan fácil y profunda que cualquier codificador principiante puede entenderlo y utilizarlo en sus necesidades. Entonces, sigue aprendiendo, trabajando y obteniendo experiencia en JavaScript con Linuxhint.com para tener un mejor agarre sobre él. Muchas gracias!