La diferencia entre map () y forEach () en JavaScript (preguntas de la entrevista frontal)

Si ya tiene experiencia en el uso de JavaScript, es posible que ya conozca estos dos métodos aparentemente idénticos:

Array.prototype.map()和Array.prototype.forEach()。

Entonces, ¿cuál es la diferencia entre ellos?
definición

Primero echemos un vistazo a la definición de Map y ForEach en MDN:

forEach(): 针对每一个元素执行提供的函数(executes a provided function once for each array element)。

map(): 创建一个新的数组，其中每一个元素由调用数组中的每一个元素执行提供的函数得来(creates a new array with the results of calling a provided function on every element in the calling array)。

到底有什么区别呢？forEach()方法不会返回执行结果，而是undefined。也就是说，forEach()会修改原来的数组。而map()方法会得到一个新的数组并返回。
示例

A continuación se proporciona una matriz. Si queremos duplicar cada elemento, podemos usar map y forEach para lograr el objetivo.

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

Para cada

Tenga en cuenta que forEach no devolverá un valor significativo.

Modificamos directamente el valor de arr en la función de devolución de llamada.

arr.forEach((num, index) => {
  return arr[index] = num * 2;
});

执行结果如下：
?
1
	
// arr = [2, 4, 6, 8, 10]

Mapa

let doubled = arr.map(num => {
  return num * 2;
});

执行结果如下：
	
// doubled = [2, 4, 6, 8, 10]

Comparación de velocidad de ejecución

Estos son los resultados de la prueba de forEach () y map ():

Como puede ver, la velocidad de ejecución de forEach () en mi computadora es un 70% más lenta que map (). El resultado de la ejecución del navegador de cada persona será diferente. Puede utilizar el siguiente enlace para probarlo: Map vs. forEach-jsPref.

JavaScript es demasiado inteligente (gui) para vivir (yi), no sabe si hay un error, también podría conectarse al monitoreo en tiempo real en línea de Fundebug.

Perspectiva funcional

Si está acostumbrado a programar con funciones, definitivamente le gusta usar map (). Debido a que forEach () cambiará el valor de la matriz original y map () devolverá una matriz nueva, la matriz original no se verá afectada.

¿Cual es mejor?

Depende de lo que quieras hacer.

forEach es adecuado cuando no tiene la intención de cambiar los datos, pero solo desea hacer algo con los datos, como almacenarlos en una base de datos o imprimirlos.

let arr = [ 'a' , 'b' , 'c' , 'd' ];
arr.forEach((letter) => {
  console.log(letter);
});
// a
// b
// c
// d

map () es adecuado cuando desea cambiar el valor de los datos. No solo es más rápido, sino que también devuelve una nueva matriz. La ventaja de esto es que puede usar la composición (combinación de mapa (), filtro (), reducir (), etc.) para jugar más trucos.

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(num => num * 2).filter(num => num > 5);
// arr2 = [6, 8, 10]

Primero usamos map para multiplicar cada elemento por 2, y luego filtramos aquellos elementos mayores que 5. El resultado final se asigna a arr2.

Puntos centrales

Lo que se puede hacer con forEach () también es posible con map (). Lo contrario también es cierto.

map () asignará espacio de memoria para almacenar la nueva matriz y la devolverá, forEach () no devolverá datos.

forEach () permite que la devolución de llamada cambie los elementos de la matriz original. map () devuelve una nueva matriz.