¿Cómo usar maps en JavaScript?

A veces necesitamos aplicar una función u operación en cada elemento de una matriz para obtener una nueva matriz con valores modificados For() o ForEach(). Pero hay otra función integrada en JavaScript llamada matriz map() eso puede ayudarlo a realizar este tipo de operaciones con gracia sin iterar manualmente sobre la matriz.

Usando la función de map de matriz, puede realizar estas operaciones de manera eficiente mientras mantiene la cordura de su código y evita escribir los grandes bucles. map() La función puede ser un poco confusa si está comenzando con su viaje de codificación en javascript.

Si desea conocer en detalle la función de map en Javascript, quédese conmigo: aquí hay un desglose detallado de la función de map con su implementación.

¿Qué es la función map en javascript?

Los map() crea una nueva matriz y la llena con el valor obtenido al aplicar la función dada en cada elemento de la matriz original. métodos no mutantes, es decir, la función de map no cambia los elementos del arreglo original.

Por ejemplo, si tiene una serie de detalles básicos sobre un grupo de personas y desea obtener el nombre de cada persona, puede aplicar la función de map.

Antes de comenzar la implementación, asegúrese de tener la configuración de tiempo de ejecución de node js para ejecutar programas javascript en la terminal.

Si está utilizando Chrome, también puede ejecutar programas en la consola de herramientas de desarrollo de Chrome.

Sintaxis de map en javascript

La sintaxis de la función map() es la siguiente:

array.map(function(currentValue, index, arr), thisValue)

La sintaxis de map() contiene dos argumentos: la función de devolución de llamada y este valor.

Analicemos estos argumentos en detalle.

• función (valor actual, índice, arr): esta es la función de devolución de llamada que se ejecuta en cada elemento de la matriz dada, y el valor devuelto por esta función se almacena en la nueva matriz.
  • valor actual: Esto contiene el valor de los elementos actuales que están siendo procesados ​​por la función. parámetros requeridos.
  • Índice: este parámetro contiene el índice de matriz del elemento actual que está siendo procesado por la función. parámetros opcionales.
  • Arr: este parámetro contiene la matriz en la que se llama a la función. parámetros opcionales.
• este valor: almacena el valor que se usará como "esto" mientras se ejecuta la función de devolución de llamada. argumentos opcionalesEl valor predeterminado de "thisValue" no está definido.

¿Cómo usar la función maps en javascript?

Ahora conocemos los conceptos básicos de la función de map y su sintaxis en detalle. map() función, consideremos un ejemplo:

Considere que tiene una matriz de los siguientes elementos:

dejar arr = [1, 2, 3, 4, 5];

Y desea multiplicar cada elemento de la matriz por 2. Puede implementar esto mediante el uso de la función de map de la siguiente manera:

let arr = [1, 2, 3, 4, 5];
let temp = arr.map(function(element){
return element * 2;
})
console.log(temp);

Puede implementar lo mismo mediante el uso de un bucle for de la siguiente manera:

let arr = [1,2,3,4,5];
let temp = []
for(let i = 0; i < arr.length; i++){
temp.push(2 * arr[i]);
}
console.log(temp);

Pero, tenga en cuenta que no necesita crear una matriz vacía mientras usa la función de map, a diferencia del método de bucle for, donde necesitamos crear una matriz vacía.

El código escrito con la función map es conciso y fácil de implementar.

let arr = [1, 2, 3, 4, 5];
let temp = arr.map(element => element * 2);
console.log(temp);

Compare estos tres códigos uno al lado del otro y notará cómo la función de map puede reducir drásticamente la longitud del código con la legibilidad mejorada del código inicialice las variables mientras usa la función de map.

¿Cómo usar la función map en javascript en una matriz de objetos?

Supongamos que nos dan una matriz de objetos.El objeto encapsula la longitud y la anchura como los campos para definir el objeto como un rectángulo.

let rectangles=[{length: 10, breath: 5},
{length: 20, breath: 5},
{length: 12, breath: 4},
{length: 16, breath: 10}
];

Si quieres calcular el área de cada rectángulo, entonces ¿puedes usar el método map() para iterar sobre la matriz y obtener el área de los rectángulos multiplicando el largo por el ancho?

Sí, podemos calcular el área del rectángulo mediante el uso de la función map().

Se puede acceder al valor de largo y ancho de un rectángulo usando la tecla .

let rectangles = [{length:10, breadth: 5},
{length: 20, breadth: 5},
{length: 12, breadth: 4},
{length: 16, breadth: 10}
];

let area = rectangles.map(function(rectangle){
        return (rectangle.length) * (rectangle.breadth);
});

console.log(area);

De manera similar, podemos realizar operaciones en una matriz de objetos que tienen más de dos propiedades.

Ventajas de usar map() sobre for loop

Las ventajas de usar un map sobre bucle son las siguientes:

• Inmutable: la función map() es inmutable, es decir, su matriz original permanecerá intacta.
• Código más limpio: la función de map ayuda a eliminar líneas innecesarias al escribir código, lo que lo ayuda a mantener su código limpio y más legible.
• Rapidez para codificar: la función de map proporciona una forma más rápida de codificar que los bucles convencionales.

¿Cuándo no usar map() en javascript?

No debe usar la función de map si,

• No estás usando la matriz que devuelve.
• No está devolviendo ningún valor de la función de devolución de llamada

No debe utilizar la función de map en ambos casos.

Preguntas frecuentes sobre maps en javascript

¿Qué es map() en JavaScript?

El método map() crea una nueva matriz y la llena con el valor obtenido al aplicar la función dada en cada elemento original de la matriz.

¿El map de matriz es asíncrono?

No, el map de matriz no es una función asíncrona.

¿El map es una función de devolución de llamada?

Ningún map no es una función de devolución de llamada.

¿ Te fue útil este artículo ?
⬇️ Ayudame compartiendo para poder llegar a más personas.⬇️

Si quieres conocer otros artículos parecidos a ¿Cómo usar maps en JavaScript? puedes visitar la categoría Javascript.