for循环使用await，for of以及for await of

几个for循环里使用await的方法让小编有点混乱，所以决定今天捋一捋，顺便把是否能用break也标一下：

其实for循环中使用await就分几种，看看哪个是生效的：

1、for：循环中使用await的写法（生效）：

for( let i=0; i<array.length; i++ ){
    let datas = await getDatas()
    break
}

2、forEach：循环中使用await的写法（不生效）：

array.forEach(async (item)=>{
    let datas = await getDatas()
})

3、for of：循环中使用await的写法（生效）：

for( let item of array ){
    let datas = await getDatas()
    break
}

4、for await of：循环的使用方法（生效）：

for await (let item of array){
    break
}

注意：

1. for：要使用在async异步方法里，循环会等await执行而停留，await是有效的，有break；
2. forEach：没有break，循环不会等await执行而停留，await是无效的；
3. for of：要使用在async异步方法里，执行期间，await之前的代码会执行，到了await会等待await执行完才继续往下执行，有break；
4. for await of：也要用在async异步方法里，有break，但是它一般是使用在item是个异步方法的情况下，并不常见，场景如下面对应的例子，要遍历的数组元素是个异步请求，异步没回来之前整个for循环代码不执行：

下面我们来验证：

for 使用await的验证例子：

//模拟异步代码
function getDatas(times){
    times = times || 0
    return new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve(times)
        }, times*1000)
    })
}
let arrays = [1, 2, 3]
async function execute(){
    for( let i=0; i<arrays.length; i++ ){
        console.log(`第${i+1}次我先执行了`)
        let datas = await getDatas(arrays[i])
        console.log("返回结果："+datas)
        console.log(`第${i+1}次执行完了`)
        console.log("-------------------------")
    }
}
execute()

执行结果图：

forEach使用await的验证例子：

//模拟异步代码
function getDatas(times){
    times = times || 0
    return new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve(times)
        }, times*1000)
    })
}
let arrays = [1, 2, 3]
arrays.forEach(async (item, index)=>{
    console.log(`第${index+1}次开始`)
    let datas = await getDatas(item)
    console.log("返回结果："+datas)
    console.log(`第${item}次结束`)
})

执行结果图：

把顺序调换一下：

可以看到forEach中使用await是无效的，每次执行结果都是一样，只不过在let的作用下，await后面的代码能按顺序执行；

for of 使用await的验证例子：

//模拟异步代码
function getDatas(times){
    times = times || 0
    return new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve(times)
        }, times*1000)
    })
}
let arrays = [2, 1, 3]
async function execute(){
    let index = 1
    for (let item of arrays){
        console.log(`第${index}次我先执行了`)
        let datas = await getDatas(item)
        console.log("返回结果："+datas)
        console.log(`第${index}次执行完了`)
        console.log("-------------------------")
        index++
    }
}
execute()

执行结果图：

for await of 的使用验证例子：

//模拟异步代码
function getDatas(times){
    times = times || 0
    return new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve(times)
        }, times*1000)
    })
}
let arrays = [getDatas(0), getDatas(1), getDatas(1.5)]
//一定要在async方法里使用，不能直接写for await (let item of arrays){}执行
async function execute(){
    for await (let item of arrays){
        console.log(item)
    }
}
execute()

执行结果图：

总结：

• for、for of、for await of是生效的，forEach的await是不生效的；
• for、for of是await这一行代码在等待，for await of是整个for在等待；

扩展：

• 实际开发中我们可以发现其实for、while、for in、for of、for await of使用await都是生效的；
• 而几乎有回调的遍历方法：forEach、map、filter、reduce、some、every、find等，使用await都是不生效的；

今天就到这里啦，赶紧去试试吧