在 Javascript 中小心使用 forEach

当涉及到异步函数时，使用Array.prototype.forEach()可能会导致意外行为。让我们探讨一下为什么会出现这种情况，并讨论一些替代方法。

Array.prototype.forEach()和异步函数：

forEach()方法通常用于遍历数组。然而，它有一个限制：它在处理异步函数时效果不佳。

当你使用forEach()与异步操作（例如promises）时，它不会等待promises解决。因此，promises中的计算可能会丢失，导致错误的结果或错误。

示例

const ratings = [5, 4, 5];
let sum = 0;

const sumFunction = async (a, b) => a + b;

ratings.forEach(async (rating) => {
  sum = await sumFunction(sum, rating);
});

console.log(sum);
// 期望的输出：14
// 实际输出：0

在sumFunction是异步的情况下，forEach()循环不会等待promises完成。因此，实际输出是0，即使你可能期望它是14。

1. 替代方案：使用for...of：

不要使用forEach()，考虑使用for...of循环。这个循环会按顺序等待每个异步任务完成，确保在进行下一次迭代之前promises已经解决。

以下是如何使用for...of重新编写你的示例：

示例

const ratings = [5, 4, 5];
let sum = 0;

const sumFunction = async (a, b) => a + b;

for (const rating of ratings) {
  sum = await sumFunction(sum, rating);
}

console.log(sum); // 期望输出：14

1. 最佳实践：

虽然for...of对于处理异步任务来说是更好的选择，但了解不同迭代方法的行为非常重要。

注意约定和项目特定的指南。与团队讨论，找到最适合你项目需求的解决方案。

记住，使用正确的迭代方法可以极大地影响代码的正确性和性能。

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！