为什么forEach不能用await

380 阅读1分钟

为什么

今天在工作时候将await写进了forEach循环里,但是并没有生效!查询了资料发现MDN上有一段这样的描述:

如果使用 promise 或 async 函数作为 forEach() 等类似方法的 callback 参数,最好对造成的执行顺序影响多加考虑,否则容易出现错误。

简单的来说,forEach 的参数只是一个回调函数,便利时候只是进行简单的回调,不能接受异步操作(我把官方源码放在文末,里面是用 while 循环做的)。大家可以打开F12打印一下:

let ratings = [5, 4, 5];

let sum = 0;

let sumFunction = async function (a, b) {
    return a + b;
}

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

console.log(sum);// 0

在网上搜了一下相关的问题:

  • 为什么 forEach 不能 break
  • 为什么 forEach 不能 return

以及其他的一些为什么...... 基本上都和上面说的有关,即使 return 也只是 return 了回调函数,没有 return 掉整个循环。

怎么做

将循环换成 for 循环就好啦, 或者其他原生 for 循环也可以。

let test = async function () {
  let sum = 0; 
  for (let i = 0; i < 6; i++) {
    sum += await Promise.resolve(i);
  };
  console.log(sum);
};

test(); // 15

forEach 在 MDN 上的介绍

地址:

developer.mozilla.org/zh-CN/docs/…