本篇文章给大家带来了关于JavaScript循环的相关知识，其中主要给大家聊聊在js循环中怎么使用使用await以及结果分析，感兴趣的朋友一起来看一下吧，希望对大家有帮助。
前言
这个问题是这样产生的？某天，在学习异步的知识遇到这样一道题：使用Promise的方式，每隔一秒输出数组中一个值
const arr = [1, 2, 3]
arr.reduce((pre, cur) => {
return pre.then(() => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(console.log(cur))
}, 1000);
})
})
}, Promise.resolve())
登录后复制那这段代码还是挺好了解的，相当于
Promise.resolve().then(() => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(console.log(1))
}, 1000);
})
}).then(() => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(console.log(2))
}, 1000);
})
}).then(() => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(console.log(3))
}, 1000);
})
})
登录后复制看完之后，我就在想，如果我在循环中，每次输出值之后停止一秒，也可以解决，于是乎就有了以下代码
const arr = [1, 2, 3]
const sleep = (ms) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, ms)
})
}
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
await sleep(1000)
}
登录后复制打印结果也是符合预期的，在这里我就产生了第一个疑问：await不是要搭配async使用的么？这里怎么能单独使用？（不信你把代码放到浏览器控制台试试）
接着我把for改成了forEach,发现根本达不到效果，第二个疑问产生：forEach中await为什么失效了呢？
arr.forEach(async item => {
console.log(item);
await sleep(1000)
})
登录后复制带着这两个疑问，那就开始学习起来，寻找答案。
在for循环中的await
记得在学习async/await的时候有这样一句话，await只能和async搭配一起使用，其实这句话是没有错的。那为什么前面可以直接写await呢，因为我是直接写在浏览器控制台的，咱们在编辑器写代码的时候一定要套一个async使用的
<script>
const arr = [1, 2, 3]
const sleep = (ms) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, ms)
})
}
const logByOneSecond = async () => {
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
await sleep(1000)
}
}
logByOneSecond()
</script>
登录后复制所以这就算闹了个笑话，哈哈，不过当我遇到不理解的时候，又多了一个思考方向。
好的，如上所述，await确实发挥了他的作用，让JS直到等到了promise返回的处理结果，再继续往下执行；那for...of,while是不是也可以呢
const logByForof = async () => {
for (const item of arr) {
console.log(item);
await sleep(1000)
}
}
logByForof()
登录后复制const logByWhile = async () => {
let i = 0
while (i !== arr.length) {
await sleep(1000)
console.log(arr[i]);
i++
}
}
logByWhile()
登录后复制结果也是符合预期，可以在循环中使用await并实现效果
在forEach循环中的await
如一开始，在forEach中并没有的到预期的效果；首先得到一个结果：forEach中async 和await是无效的。
那我看到的解释有以下几种
JavaScript 中的 forEach不支持 promise 感知，也不支持 async 和await，所以不能在 forEach 使用 await 。
map/forEach内部使用了while结合callback方式来执行函数，await不会等待callback的执行
forEach 只支持同步代码
第二种说法，简化以后的伪代码，如下
while(index < arr.length){
callback(item, index)
}
登录后复制map/forEach是简单的执行下回调函数，并不会处理异步的情况。即：map/forEach 会同时创建出多个回调函数，多个回调函数被加上了各自的 async、await，如下
async ()=>{
await sleep(1000);
}
async ()=>{
await sleep(1000);
}
async ()=>{
await sleep(1000);
}
登录后复制各个函数之间是独立的，彼此的回调也是独立的；请求是异步的，彼此之间又没有关联，顺序也就自然无法保证
总结
回顾了 async/await 在循环语句里的使用方法，对于普通的 for-loop，所有的 await 都是串行调用的，可以放心使用，包括 while、for-in、for-of 等等;但是在有 callback 的 array 方法，如 forEach、map、filter、reduce 等等，有许多副作用，最好就别使用 await 了。
【推荐学习：javascript高级教程】
以上就是聊聊JS循环中使用await会产生什么“化学反应”的详细内容，转载自php中文网
发表评论 取消回复