解决使用 ES6 中 forEach 循环时遇到的问题

ES6 提供了很多新的语法和功能，其中包括 forEach 循环。forEach 循环是一种遍历数组的方法，可以用来执行某些操作。然而，在使用 forEach 循环时，我们可能会遇到一些问题，下面将详细介绍这些问题以及如何解决它们。

问题1：无法使用 break 和 continue

在使用 forEach 循环时，我们无法使用 break 和 continue 关键字。因为 forEach 循环内部是不能被中断的，而 break 和 continue 依赖于循环被中断。

解决方法

• 使用 for 循环替代 forEach 循环

const arr = [1, 2, 3, 4, 5];
for(let i = 0; i < arr.length; i++){
  if(arr[i] === 3){
    continue;
  }
  console.log(arr[i]);
}

• 使用 Array.prototype.some 和 Array.prototype.every

const arr = [1, 2, 3, 4, 5];
arr.every((item) => {
  if(item === 3){
    return false; // 等价于break
  }
  console.log(item);
  return true; // 等价于continue
});

问题2：无法正确修改原数组

在使用 forEach 循环时，我们可能会尝试修改原数组，但结果会出乎意料。因为 forEach 循环中传入的函数是对每个元素进行操作的，不会改变原数组本身。

const arr = [1, 2, 3, 4, 5];
arr.forEach((item) => {
  arr.push(item + 1);
  console.log(item);
});
// 输出：1 2 3 4 5

解决方法

• 使用 let 关键字

let arr = [1, 2, 3, 4, 5];
arr.forEach((item, index, arr) => {
  arr[index] = item + 1;
});
console.log(arr); // 输出 [2,3,4,5,6]

问题3：无法正常使用 this

在使用 forEach 循环时，我们可能会想使用 this 关键字来引用该数组。然而，在 forEach 循环中使用 this 关键字引用数组时，它将指向全局作用域，导致无法正常使用。

const arr = [1, 2, 3, 4, 5];
arr.forEach(function(item) {
  console.log(this); // 输出全局作用域的对象
});

解决方法

• 使用箭头函数

const arr = [1, 2, 3, 4, 5];
arr.forEach((item) => {
  console.log(this); // 输出父级作用域中的 this 对象
});

总结

在使用 forEach 循环时，需要注意上述问题，合理使用解决方法，才能更好地使用这个方法。同时，我们还可以使用其他遍历数组的方法，如 for 循环、for in 循环、for of 循环等。记得根据情况选择合适的方法解决问题。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652ca4e37d4982a6ebe48cc0