刘勇虎的官方网站

描述

forEach() 方法是一个迭代方法。它按索引升序地为数组中的每个元素调用一次提供的 callbackFn 函数。与 map() 不同，forEach() 总是返回 undefined，而且不能继续链式调用。其典型的用法是在链式调用的末尾执行某些操作

callbackFn 仅对已赋值的数组索引调用。对于稀疏数组中的空槽，它不会被调用。

forEach() 不会改变其调用的数组，但是，作为 callbackFn 的函数可以更改数组。请注意，在第一次调用 callbackFn 之前，数组的长度已经被保存。因此：

• 当调用 forEach() 时，callbackFn 不会访问超出数组初始长度的任何元素。
• 已经访问过的索引的更改不会导致 callbackFn 再次调用它们。
• 如果 callbackFn 更改了数组中已经存在但尚未访问的元素，则传递给 callbackFn 的值将是在访问该元素时的值。已经被删除的元素不会被访问。

forEach() 方法是通用的。它只期望 this 值具有 length 属性和整数键的属性。

除非抛出异常，否则没有办法停止或中断 forEach() 循环。如果有这样的需求，则不应该使用 forEach() 方法。

可以通过像 for、for…of 和 for…in 这样的循环语句来实现提前终止。当不需要进一步迭代时，诸如 every()、some()、find() 和 findIndex() 等数组方法也会立即停止迭代。

forEach() 期望的是一个同步函数，它不会等待 Promise 兑现。在使用 Promise（或异步函数）作为 forEach 回调时，请确保你意识到这一点可能带来的影响。

原因一：不支持处理异步函数

先看一个例子：

async function test() {  
    let arr = [3, 2, 1]  
    arr.forEach(async item => {  
        const res = await mockSync(item)  
        console.log(res)  
    })  
    console.log('end')  
}  
  
function mockSync(x) {  
    return new Promise((resolve, reject) => {  
        setTimeout(() => {  
                resolve(x)  
        }, 1000 * x)  
    })  
}  
test()  
我们期望的结果是:  
3  
2   
1  
end  
  
但是实际上会输出:  
  
end  
1  
2  
3  
 

JavaScript中的forEach()方法是一个同步方法，它不支持处理异步函数。如果你在forEach中执行了异步函数，forEach()无法等待异步函数完成，它会继续执行下一项。这意味着如果在forEach()中使用异步函数，无法保证异步任务的执行顺序。

替代forEach的方式

1.方式一

可以使用例如map()、filter()、reduce()等，它们支持在函数中返回Promise，并且会等待所有Promise完成。

使用map()和Promise.all()来处理异步函数的示例代码如下：

const arr = [1, 2, 3, 4, 5];  
  
async function asyncFunction(num) {  
  return new Promise((resolve, reject) => {  
    setTimeout(() => {  
      resolve(num * 2);  
    }, 1000);  
  });  
}  
  
const promises = arr.map(async (num) => {  
  const result = await asyncFunction(num);  
  return result;  
});  
  
Promise.all(promises).then((results) => {  
  console.log(results); // [2, 4, 6, 8, 10]  
});  
 

由于我们在异步函数中使用了await关键字，map()方法会等待异步函数完成并返回结果，因此我们可以正确地处理异步函数。

方式二 使用for循环来处理异步函数

const arr = [1, 2, 3, 4, 5];  
  
async function asyncFunction(num) {  
  return new Promise((resolve, reject) => {  
    setTimeout(() => {  
      resolve(num * 2);  
    }, 1000);  
  });  
}  
  
async function processArray() {  
  const results = [];  
  for (let i = 0; i < arr.length; i++) {  
    const result = await asyncFunction(arr[i]);  
    results.push(result);  
  }  
  console.log(results); // [2, 4, 6, 8, 10]  
}  
  
processArray();  
 

原因二：无法捕获异步函数中的错误

如果异步函数在执行时抛出错误，forEach()无法捕获该错误。这意味着即使在异步函数中出现错误，forEach()仍会继续执行。

原因三：除了抛出异常以外，没有办法中止或跳出 forEach() 循环

forEach()方法不支持使用break或continue语句来跳出循环或跳过某一项。如果需要跳出循环或跳过某一项，应该使用for循环或其他支持break或continue语句的方法。

原因四：forEach 删除自身元素，index不可被重置

在forEach中我们无法控制 index 的值，它只会无脑的自增直至大于数组的 length
跳出循环。所以也无法删除自身进行index重置，先看一个简单例子：

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

原因五：this指向问题

在forEach()方法中，this关键字引用的是调用该方法的对象。但是，在使用普通函数或箭头函数作为参数时，this关键字的作用域可能会出现问题。在箭头函数中，this关键字引用的是定义该函数时所在的对象。在普通函数中，this关键字引用的是调用该函数的对象。如果需要确保this关键字的作用域正确，可以使用bind()方法来绑定函数的作用域。以下是一个关于forEach()方法中this关键字作用域问题的例子：

const obj = {  
  name: "Alice",  
  friends: ["Bob", "Charlie", "Dave"],  
  printFriends: function () {  
    this.friends.forEach(function (friend) {  
      console.log(this.name + " is friends with " + friend);  
    });  
  },  
};  
obj.printFriends();  
 

在这个例子中，我们定义了一个名为obj的对象，它有一个printFriends()方法。在printFriends()方法中，我们使用forEach()方法遍历friends数组，并使用普通函数打印每个朋友的名字和obj对象的name属性。但是，当我们运行这个代码时，会发现输出结果为：

undefined is friends with Bob  
undefined is friends with Charlie  
undefined is friends with Dave  
 

这是因为，在forEach()方法中使用普通函数时，该函数的作用域并不是调用printFriends()方法的对象，而是全局作用域。因此，在该函数中无法访问obj对象的属性。

为了解决这个问题，可以使用bind()方法来绑定函数的作用域，或使用箭头函数来定义回调函数。以下是使用bind()方法解决问题的代码示例：

const obj = {  
  name: "Alice",  
  friends: ["Bob", "Charlie", "Dave"],  
  printFriends: function () {  
    this.friends.forEach(  
      function (friend) {  
        console.log(this.name + " is friends with " + friend);  
      }.bind(this) // 使用bind()方法绑定函数的作用域  
    );  
  },  
};  
obj.printFriends();  
 

在这个例子中，我们使用bind()方法来绑定函数的作用域，将该函数的作用域绑定到obj对象上。运行代码后，输出结果为：

Alice is friends with Bob   
Alice is friends with Charlie   
Alice is friends with Dave  
 

通过使用bind()方法来绑定函数的作用域，我们可以正确地访问obj对象的属性。

另一种解决方法是使用箭头函数。由于箭头函数没有自己的this，它会继承它所在作用域的this。因此，在箭头函数中，this关键字引用的是定义该函数时所在的对象。代码略

原因六：forEach性能比for循环低

for：for循环没有额外的函数调用栈和上下文，所以它的实现最为简单。
forEach：对于forEach来说，它的函数签名中包含了参数和上下文，所以性能会低于 for 循环。

原因七：会跳过已删除或者未初始化的项

// 跳过未初始化的值  
const array = [1, 2, /* empty */, 4];  
let num = 0;  
  
array.forEach((ele) => {  
  console.log(ele);  
  num++;  
});  
  
console.log("num:",num);  
  
//  1  
//  2   
//  4   
// num: 3  
  
// 跳过已删除的值  
const words = ['one', 'two', 'three', 'four'];  
words.forEach((word) => {  
  console.log(word);  
  if (word === 'two') {  
  // 当到达包含值 `two` 的项时，整个数组的第一个项被移除了  
  // 这导致所有剩下的项上移一个位置。因为元素 `four` 正位于在数组更前的位置，所以 `three` 会被跳过。  
    words.shift(); //'one' 将从数组中删除  
  }  
}); // one // two // four  
  
console.log(words); // ['two', 'three', 'four']  
  
 

原因八：forEach使用不会改变原数组

forEach() 被调用时，不会改变原数组，也就是调用它的数组。但是那个对象可能会被传入的回调函数改变

// 例子一  
const array = [1, 2, 3, 4];   
array.forEach(ele => { ele = ele * 3 })   
console.log(array); // [1,2,3,4]  
  
// 解决方式，改变原数组  
const numArr = [33,4,55];  
numArr.forEach((ele, index, arr) => {  
    if (ele === 33) {  
        arr[index] = 999  
    }  
})  
console.log(numArr);  // [999, 4, 55]  
  
// 例子二  
const changeItemArr = [{  
    name: 'wxw',  
    age: 22  
}, {  
    name: 'wxw2',  
    age: 33  
}]  
changeItemArr.forEach(ele => {  
    if (ele.name === 'wxw2') {  
        ele = {  
            name: 'change',  
            age: 77  
        }  
    }  
})  
console.log(changeItemArr); // [{name: "wxw", age: 22},{name: "wxw2", age: 33}]  
  
// 解决方式  
const allChangeArr = [{    name: 'wxw',    age: 22}, {    name: 'wxw2',    age: 33}]  
allChangeArr.forEach((ele, index, arr) => {  
    if (ele.name === 'wxw2') {  
        arr[index] = {  
            name: 'change',  
            age: 77  
        }  
    }  
})  
console.log(allChangeArr); // // [{name: "wxw", age: 22},{name: "change", age: 77}]  
 

参考

• forEach()