几个for循环里await关键字的用法

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

其实for循环中使用await就分几种，先展示测试结果，看看哪个是生效的：

测试结果：

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

async function loop(){
    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的写法（生效）：

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

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

async function loop(){
    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是无效的，每次执行结果都是一样，只不过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 使用await的验证例子：

//模拟异步代码
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都是不生效的；

今天就到这里，欢迎评论区交流；