配图源自 Freepik
在上一篇文章【JavaScript | for 语句详解】提到了在循环中应用 async/await 的例子。
于是，顺道提一下在 Array.prototype.forEach() 使用 async/await 的问题。其实，在 MDN 上就有提醒：
如果使用
promise或async函数作为forEach()等类似方法的callback参数，最好对造成的执行顺序影响多加考虑，否则容易出现错误。
示例：
let sum = 0
const arr = [1, 2, 3]
async function sumFn(a, b) {
return a + b
}
// 为了方便后续修正改造，将 forEach 逻辑放到函数 main 中执行了。
function main(array) {
array.forEach(async item => {
sum = await sumFn(sum, item)
})
console.log(sum) // 0, Why?
}
main(arr)
为什么 sum 打印结果是 0，而不是预期的 6 呢？
首先，我们要理解
async函数的语义，它表示函数中有异步操作，await则表示其后面的表达式需要等待结果，函数最终返回一个Promise对象。
当代码执行到 forEach 时：
1. 首先遇到 `sum = await sumFn(sum, item)` 语句（注意，它是从右往左执行的）
因此，它会执行 `sumFn(0, 1)`，那么该函数 `return 1`，
由于 async 函数始终会返回一个 Promise 对象，即 `return Promise.resolve(1)`。
2. 由于 await 的原因，它其实相当于执行 `Promise.resolve(3).then()` 方法，
它属于微任务，会暂时 Hold 住，被放入微任务的队列，待本次同步任务执行完之后，
才会被执行，因此并不会立即赋值给 sum（所以 sum 仍为 0）。
3. 那 JS 引擎主线程不会闲着的，它会继续执行“同步任务”，即下一次循环。
同理，又将 `return Promise.resolve(2)` 放入微任务队列。
直到最后一次循环，同样的的还是 `return Promise.resolve(3)`。
其实到这里，forEach 其实算是执行完了。
以上示例，forEach 的真正意义是创建了 3 个微任务。
4. 由于主线程会一直执行同步任务，待同步任务执行完之后，才会执行任务队列里面的微任务。
待 forEach 循环结束之后，自然会执行 `console.log(sum)`，
但注意，由于 await 的原因，sum 一直未被重新赋值，因此 sum 还是为 0 ，
所以控制台输出了 0。
5. 等 `console.log(sum)` 执行完毕，才开始执行队列中的微任务，
其中 `await Promise.resolve(0)` 的结果，
相当于 `Promise.resolve(0)` 的 then 方法的返回值，
所以此前的三个微任务，相当于：
`sum = 1`
`sum = 2`
`sum = 3`
它们被依次执行。
6. 因此 sum 最终的值变成了 3（注意不是 6 哦）。
所以，在 forEach 中使用 async/await 可能没办法到达预期目的哦。
如何解决以上问题呢？
我们可以使用 for...of 来替代：
let sum = 0
const arr = [1, 2, 3]
async function sumFn(a, b) {
return a + b
}
// await 要放在 async 函数中
async function main(array) {
for (let item of array) {
sum = await sumFn(sum, item)
}
console.log(sum) // 6
}
main(arr)
这样就能输出预期结果 6 了。
那为什么 for...of 就可以呢？因为它本质上就是一个 while 循环。
let sum = 0
const arr = [1, 2, 3]
async function sumFn(a, b) {
return a + b
}
// await 要放在 async 函数中
async function main(array) {
// for (let item of array) {
// sum = await sumFn(sum, item)
// }
// 相当于
const iterator = array[Symbol.iterator]()
let iteratorResult = iterator.next()
while (!iteratorResult.done) {
sum = await sumFn(sum, iteratorResult.value)
iteratorResult = iterator.next()
}
console.log(sum) // 6
}
main(arr)
只要了解了 async/await 和 for...of 的内部运行机制，分析起来就不难了。
The end.