JavaScript 中 forEach() 和 map() 循环的区别

当我们使用数组时，遍历数组以访问元素并在这些元素上执行某种功能以完成任何任务是必不可少的步骤。
例如，如果你有一个由 20 个学生获得的分数数组并且你想计算他们的 GPA，如果你有一个图像数组并且你想在前端渲染它等等。要管理这些情况，你必须有适当的了解如何访问数组的元素以及如何对它们进行操作。

除了基本的语言结构，即 for 循环、while 循环和 do-while 循环之外，还有两种广泛使用的迭代方法。

.forEach() 和 .map()：这些是用于迭代数组的方法，从技术上讲，它们为数组的每个元素调用提供的回调函数。

句法：

forEach((currentElement, indexOfElement, array) => { ... } )

map((currentElement, indexOfElement, array) => { ... } )

参数：

• currentElement：这是回调中正在处理的当前元素。
• indexOfElement：数组中当前元素的索引。
• 数组：正在执行整个操作的数组。

示例 1：我们的目标是创建这样一种功能，可以为给定数组的元素提供平方值。我们创建了两个数组，一个使用forEach() ，另一个使用 map() ，两者都产生相同的结果。在回调函数中访问元素和索引，我们在该索引处分配每个元素的平方。

JavaScript

    /* forEach method */
    let myArray1 = [1, 2, 3, 4];
    myArray1.forEach((element, index) => {
        myArray1[index] = element * element;
    })
    console.log(myArray1);
  
    /* map method */
    let myArray2 = [1, 2, 3, 4];
    myArray2.map((element, index) => {
        myArray2[index] = element * element;
    })
    console.log(myArray2);

输出：通过下面的输出图像，我们可以推断出这两种方法的工作原理。

示例 2：我们正在执行相同的功能，但forEach()的返回值是“未定义”，而map()方法的返回值是一个数组。

JavaScript

    let myArray = [1, 2, 3, 4];
  
    const returnValue = myArray.forEach((element) => {
        return element * element;
    });
    console.log(returnValue);

输出：

示例 3：以下示例演示了map()方法。

JavaScript

    let myArray = [1, 2, 3, 4];
  
    const returnValue = myArray.map((element) => {
        return element * element;
    })
    console.log(returnValue);

输出：

示例 4：在这个示例中，我们将应用链接技术，返回值在下一个实例方法上进行操作。为简单起见，我们使用了数组reverse()方法，但它可以是任何东西，例如排序、查找、减少、过滤等。甚至自定义方法也可用于链接。

JavaScript

    let myArray = [1, 2, 3, 4];
  
    const returnValue = myArray.forEach((element) => {
        return element * element;
    }).reverse();
    console.log(returnValue);

输出： forEach()方法返回“ undefined ”，并且可以通过数组调用下一个实例方法（reverse）。 JavaScript 正在抛出 TypeError。

示例 5：以下代码演示了 reverse()方法用于从上述代码中实现的map()方法获得的结果。

JavaScript

    let myArray = [1, 2, 3, 4];
  
    const returnValue = myArray.map((element) => {
        return element * element;
    }).reverse();
    console.log(returnValue);

输出：这里的 map 方法返回一个数组，该数组调用下一个实例方法，稍后提供最终的 returnValue（调用数组的反向）。

forEach() 和 map() 方法的区别：

	forEach()	map()
1	The forEach() method does not create a new array based on the given array.	The map() method creates an entirely new array.
2	The forEach() method returns “undefined“.	The map() method returns the newly created array according to the provided callback function.
3	The forEach() method doesn’t return anything hence the method chaining technique cannot be applied here.	With the map() method, we can chain the other array Instance methods i.e returned value of the map() method invokes the next method in the chain.

结论：由于它们的工作差异很小，因此执行速度也不是很重要，所以是时候考虑一下，选择哪一个？如果您想要返回值的好处，或者您不想更改原始数组，请继续使用map() ，否则如果您只想在数组上迭代或执行非转换过程， forEach()可能是更好的选择。