ECMAScript 2016 中使用的 forEach 函数有哪些技巧及注意事项？

什么是 forEach 函数？

forEach 函数是 JavaScript 中的一个数组方法，它可以遍历数组中的每一个元素，并对每个元素执行一个回调函数。

forEach 函数的基本语法

forEach 函数的基本语法如下所示：

array.forEach(callback[, thisArg]);

其中，

• array 是要遍历的数组；
• callback 是一个回调函数，它会被传递三个参数：当前遍历的元素、当前元素的索引和整个数组；
• thisArg 是可选的，它指定了回调函数中的 this 对象。

forEach 函数的技巧和注意事项

1. 使用箭头函数作为回调函数

在 ECMAScript 6 中，可以使用箭头函数来定义回调函数，这样可以让代码更加简洁和易读。例如：

const arr = [1, 2, 3];
arr.forEach(item => console.log(item));

2. 使用 break 和 continue

forEach 函数没有像 for 循环那样的 break 和 continue 关键字，但是可以通过在回调函数中使用 return 语句来实现类似的功能。例如：

-- -------------------- ---- -------
----- --- - --- -- -- -- ---
---------------- -- -
  -- ----- --- -- -
    ------- -- --- --------
  -
  ------------------
  -- ----- --- -- -
    ------ ------ -- --- -----
  -
---

3. 修改原数组

在回调函数中，可以修改原数组的值。例如：

const arr = [1, 2, 3];
arr.forEach((item, index, array) => {
  array[index] = item * 2;
});
console.log(arr); // [2, 4, 6]

4. 使用 thisArg

可以通过 thisArg 参数来指定回调函数中的 this 对象。例如：

const obj = {
  name: 'Tom',
  arr: [1, 2, 3],
  print(item) {
    console.log(this.name, item);
  }
};
obj.arr.forEach(obj.print, obj);

5. 不要在循环中修改数组的长度

在循环中修改数组的长度会导致一些不可预知的问题。因此，在使用 forEach 函数时，不要在回调函数中修改数组的长度。例如：

const arr = [1, 2, 3];
arr.forEach((item, index, array) => {
  array.push(item * 2); // 不要这样做
});
console.log(arr); // [1, 2, 3, 2, 4, 6]

总结

在 ECMAScript 2016 中，forEach 函数是一个非常常用的数组方法，它可以遍历数组中的每一个元素，并对每个元素执行一个回调函数。在使用 forEach 函数时，可以使用箭头函数作为回调函数、使用 return 语句实现 break 和 continue、修改原数组的值、使用 thisArg 指定回调函数中的 this 对象，但是不要在循环中修改数组的长度。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662b5793d3423812e48de697