javascript - 为什么 for...of 等待 Promise 解决而 .forEach() 没有？

Question

我很难理解 for...of不同于 .forEach()在处理 Promise 的情况下。
使用这个片段:

const allSettled = async arr => {
    const data = []

    for (const promise of arr) {
        try {
            const result = await promise;
            data.push(result);
        } catch (e) {
            data.push(e)
        }
    }

    return data
}

我检查数组中的每个 promise ，等待它解决并将结果推送到 data .它按顺序执行。
如果我有这个片段:

const badAllSettled = arr => {
    const data = []

    arr.forEach(async promise => {
        try {
            const result = await promise;
            data.push(result);
        } catch (e) {
            data.push(e)
        }
    })

    return data
}

我得到空数组(因为 forEach 不等待 Promise 解决)。
阿法克 for...of与可迭代对象一起使用，因此它可能会暂停并等待 await返回。但是我不明白这个流程是如何一步一步地工作的。
谢谢!

Answer 1

.forEach()是这样实现的:

Array.prototype.forEach = function forEach(fn) {
  for (let i = 0; i < this.length; i++)
    fn(this[i], i, this);
}

如您所见，当 .forEach()被调用，它只是同步调用了几次回调。但是，如果回调是异步函数，则不会等待。
相比之下，当 await如果在 async 函数中找到关键字，则该函数的所有代码执行都会暂停，直到 promise 完成，这意味着任何控制流(包括 for ... of 循环)也会暂停。
以下代码的行为类似于 .forEach()因为它调用了 async 函数，该函数等待 promise 而不等待函数返回的 promise:

const allSettled = async arr => {
    const data = []

    for (const promise of arr) {
        (async () => {
            try {
                 const result = await promise;
                 data.push(result);
            } catch (e) {
                data.push(e)
            }
        )();
    }

    return data
}