forEach中的await的执行顺序与 for of等的区别

forEach中异步任务的执行顺序.先看代码<script>let promiseTask = (num) => {return new Promise((resolve, reject) => {setTimeout(() => {console.log(num * num);resolve(true);}, 1000)

zhongshizhi91

6415人浏览 · 2022-03-10 22:16:14

zhongshizhi91 · 2022-03-10 22:16:14 发布

forEach中异步任务的执行顺序.

先看代码

<script>
    let promiseTask = (num) => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log(num * num);
                resolve(true);
            }, 1000);
        })
    }

    const task = [1, 2, 3];

    async function DoTaskByForEach() {
        await task.forEach((g) => {
            promiseTask(g);
        });
    }

    // DoTaskByForEach(); // 并发执行

    async function DoTaskByForLength() {
        for (let i = 0; i < task.length; i++) {
            await promiseTask(task[i]);
        }
    }

    // DoTaskByForLength(); // 按顺序执行

    async function DoTaskByForOf() {
        for (let item of task) {
            await promiseTask(item);
        }
    }

    DoTaskByForOf(); // 按顺序执行


</script>

forEach MDN

结论

forEach 不会按顺序执行而是并发执行异步任务
for of 和普通的for循环却能顺序执行异步任务

forEach为什么是并发执行

在 tc39的文档中第五点说明 foreach 会用 while循环判断当前的索引是否小于数组的length,如果小于会一直执行下去不会等待异步任务执行完成.

Repeat, while k < len,
a. Let Pk be ! ToString(𝔽(k)).
b. Let kPresent be ? HasProperty(O, Pk).
c. If kPresent is true, then
i. Let kValue be ? Get(O, Pk).
ii. Perform ? Call(callbackfn, thisArg, « kValue, 𝔽(k), O »).
d. Set k to k + 1.