前言
在前端开发中，Array.prototype.forEach() 方法是一个非常常用的操作数组的方法。它可以遍历数组，对每个元素执行指定的函数。本文将详细介绍 ES7 中如何正确使用该方法，并提供示例代码，帮助读者更好地理解。
forEach() 的语法和用法
forEach() 方法的语法如下：
array.forEach(callback(currentValue [, index [, array]])[, thisArg])
其中，参数说明如下：
- callback：必需，表示要对数组中的每个元素执行的函数，该函数可以接收三个参数：当前元素的值，当前元素的索引和数组本身。
- currentValue：必需，表示当前被处理的元素。
- index：可选，表示当前被处理的元素的索引。
- array：可选，表示正在处理的数组。
- thisArg：可选，表示当执行回调函数时要使用的 this 对象。如果省略了该参数，则使用全局对象。
该方法会遍历数组，对每个元素执行一次回调函数。如果无返回值，返回 undefined。
forEach() 方法的注意事项
在使用 forEach() 方法时，需要注意以下几点：
forEach() 不能中断循环
当使用 forEach() 遍历数组时，无法使用 break 或 continue 来中断循环。如果需要中断循环，可以使用 for() 循环。
forEach() 中的回调函数一定会被执行
如果数组的某个元素没有值，则不会调用回调函数，但是如果元素的值是 undefined，则会调用回调函数。
forEach() 的回调函数不修改原数组
回调函数可以访问数组元素，但无法修改它们。如果需要修改数组元素，则应该使用 for() 循环。
不建议使用 forEach() 修改原数组
在进行数组操作时，不应修改原数组而应该创建一个新的数组，因为修改原数组可能会导致意外的副作用。
示例代码
假设我们现在要将数组 arr 中的每个元素增加 1，然后将结果输出到页面上（假设页面上已存在一个 div 元素）。
使用 forEach() 方法实现如下：
const arr = [1, 2, 3, 4, 5];
arr.forEach((element, index, array) => {
array[index] = element + 1;
});
document.querySelector('div').innerText = arr;使用 for() 循环实现如下：
const arr = [1, 2, 3, 4, 5];
const newArr = [];
for (let i = 0; i < arr.length; i++) {
newArr.push(arr[i] + 1);
}
document.querySelector('div').innerText = newArr;总结
通过本文学习，我们了解了 ES7 中如何正确使用 Array.prototype.forEach() 方法。同时，我们还了解了遍历数组时需要注意的几个要点。
在编写代码时，应该根据具体需求，选择合适的遍历方式。如果需要中断循环、修改原数组或是进行一些特殊的操作，应该选择 for() 循环。而如果只是简单地遍历数组并对每个元素执行一个函数，则可以使用 forEach() 方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65af745badd4f0e0ff8e3b74