js中的for和foreach處理async await時的差別

在使用foreach的時候遇到點小麻煩，特此用幾個小例子理順一下概念，順便記錄一下。

 

 

let a = [1,2,3,4,5];

function delay(){
    return new Promise((resolve)=>{
        setTimeout(resolve,300);
    });
}
function test1(){
    a.forEach((item)=>{
        console.log("start -1");
        console.log(item);
        console.log("end -1");
    });
    console.log("all done - 1");
}

async function test2(){
    a.forEach(async(item)=>{
        console.log("start -2");
        await delay();
        console.log(item);
        console.log("end -2");
    });
    console.log("all done -2 ");
}


function test3(){
    for(let item of a){
        console.log("start -3");
        console.log(item);
        console.log("end -3");
    }
    console.log("all done -3");
}


async function test4(){
    for(let item of a){
        console.log("start -4");
        await delay();
        console.log(item);
        console.log("end -4");
    }
    console.log("all done -4");
}

test1的輸出以下：

 

test2的輸出以下：

 

test3的輸出以下：

 

test4的輸出以下：

 

 

foreach自己是同步的，但若是foreach中加了async和await，就變相讓這個foreach變成了異步。

若是要在循環中處理async和await方法，直接使用for就行了