這篇文章為大家帶來了關於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中文網其他相關文章！
