Diferencia entre forEach () y map () en la matriz de JavaScript

En este tutorial, veremos la diferencia entre Array.forEach() y Array.map() métodos en JavaScript Array.

los forEach() y map() se utilizan principalmente para iterar sobre los elementos de una matriz, pero hay pocas diferencias. Los examinaremos uno por uno.

Índice
  1. Valor devuelto
  2. Encadenar otros métodos
  3. Rendimiento
  4. Interrumpir iteración
  5. Pensamientos finales

Valor devuelto

los forEach() el método regresa indefinido mientras que map() devuelve una nueva matriz con elementos transformados.

Vamos a averiguar cuadrado de cada elemento en una matriz utilizando estos dos métodos:

const numbers = [1, 2, 3, 4, 5];

// using forEach()
const squareUsingForEach = [];
numbers.forEach(x => squareUsingForEach.push(x*x));

// using map()
const squareUsingMap = numbers.map(x => x*x);

console.log(squareUsingForEach); // [1, 4, 9, 16, 25]
console.log(squareUsingMap);     // [1, 4, 9, 16, 25]

Desde forEach() Regreso indefinido, necesitamos pasar una matriz vacía para crear una nueva matriz transformada. No hay tal problema con map() método que devuelve directamente la nueva matriz transformada. Se recomienda utilizar map() método en tales casos.

Encadenar otros métodos

los map() la salida del método se puede encadenar con otros métodos como reduce(), sort(), filter() para realizar múltiples operaciones en una sola declaración.

De otra parte, forEach() es un método terminal significa que no se puede encadenar con otros métodos porque devuelve indefinido.

Vamos a averiguar suma de cuadrados de cada elemento en una matriz utilizando estos dos métodos:

const numbers = [1, 2, 3, 4, 5];

// using forEach()
const squareUsingForEach = []
let sumOfSquareUsingForEach = 0;
numbers.forEach(x => squareUsingForEach.push(x*x));
squareUsingForEach.forEach(square => sumOfSquareUsingForEach += square);

// using map()
const sumOfSquareUsingMap = numbers.map(x => x*x).reduce((total, value) => total + value);

console.log(sumOfSquareUsingForEach); // 55
console.log(sumOfSquareUsingMap);     // 55

Es un trabajo tan tedioso de usar forEach() método cuando se requieren múltiples operaciones. Nosotros podemos usar map() método en tales casos.

Rendimiento

Creamos una matriz con 1 millón de números aleatorios (que van del 1 al 1000). Vamos a comprobar el rendimiento de cada método.

// Array:
var numbers = [];
for ( var i = 0; i < 1000000; i++ ) {
    numbers.push(Math.floor((Math.random() * 1000) + 1));
}

// 1. forEach()
console.time("forEach");
const squareUsingForEach = [];
numbers.forEach(x => squareUsingForEach.push(x*x));
console.timeEnd("forEach");

// 2. map()
console.time("map");
const squareUsingMap = numbers.map(x => x*x);
console.timeEnd("map");

Este es el resultado después de ejecutar el código anterior en Google Chrome v83.0.4103.106 (64 bits) de MacBook Pro. Sugiero copiar el código anterior y probarlo usted mismo en la consola.

forEach: 26.596923828125ms
map:     21.97998046875ms

Claramente map() el metodo funciona mejor entonces forEach() para transformar elementos.

Interrumpir iteración

Esta no es la diferencia entre estos dos métodos, pero es importante saber que no hay forma de detener o break; la iteración si usas forEach() Donde map() métodos. La única forma es generar una excepción desde la función de devolución de llamada, lo que puede no ser deseable en la mayoría de los casos.

si usamos break; declaración en la función de devolución de llamada forEach() Donde map() método,

const numbers = [1, 2, 3, 4, 5];

// break; inside forEach()
const squareUsingForEach = [];
numbers.forEach(x => { 
  if(x == 3) break; // <- SyntaxError 
  squareUsingForEach.push(x*x);
});

// break; inside map()
const squareUsingMap = numbers.map(x => {
  if(x == 3) break; // <- SyntaxError 
  return x*x;
});

JavaScript devuelve SyntaxError de la siguiente manera:

ⓧ Uncaught SyntaxError: Illegal break statement

Si necesita tal comportamiento, debe usar simple for bucle o for-of / for-in lazo.

const numbers = [1, 2, 3, 4, 5];

// break; inside for-of loop
const squareUsingForEach = [];
for(x of numbers){
  if(x == 3) break;
  squareUsingForEach.push(x*x);
};

console.log(squareUsingForEach); // [1, 4]

Pensamientos finales

Se recomienda utilizar map() para transformar los elementos de un arreglo porque tiene una sintaxis corta, está encadenado y tiene mejor rendimiento.

no deberías usar map() si no usa la matriz devuelta o si no transforma los elementos de una matriz. Es un antipatrón; en su lugar deberías usar forEach() método.

Finalmente, si desea detener o interrumpir la iteración de una matriz en función de una condición, debe usar simple for bucle o for-of / for-in lazo.

Si quieres conocer otros artículos parecidos a Diferencia entre forEach () y map () en la matriz de JavaScript puedes visitar la categoría Tutoriales.

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