for...of循環用于遍歷同步的Iterator接口。新引入的for await...of循環，則是用于遍歷異步的Iterator接口。

先來看下for...of的效果：

function Gen(time) {return new Promise(function(resolve, reject) {setTimeout(function() {resolve(time)}, time)}) }function test() {let arr = [Gen(2000), Gen(100), Gen(3000)]for (let item of arr) {item.then(console.log)} } test() // 100 // 2000 // 3000

在上述遍歷的過程中可以看到三個任務是同步啟動的，然后輸出上也不是按任務的執行順序輸出的，這顯然不太符合我們的要求。

再來看下await的效果：

function Gen(time) {return new Promise(function(resolve, reject) {setTimeout(function() {resolve(time)}, time)}) }async function test() {let arr = [Gen(2000), Gen(100), Gen(3000)]for (let item of arr) {await item.then(console.log)} } test()// 2000 // 100 // 3000

從返回值看確實是按照任務的先后順序進行的，其中原理也有說明是利用了await中斷程序的功能。

在 ES9 中也可以用 for…await…of 的語法來操作：

function Gen(time) {return new Promise(function(resolve, reject) {setTimeout(function() {resolve(time)}, time)}) }async function test() {let arr = [Gen(2000), Gen(100), Gen(3000)]for await (let item of arr) {console.log(item)} } test() // 2000 // 100 // 3000

從這個結果來看和第二種寫法效果差不多，但是工作原理確完全不同。

第二種寫法是代碼塊中有 await 導致等待 Promise 的狀態而不再繼續執行；第三種寫法是整個代碼塊都不執行，等待 arr 當前的值（Promise狀態）發生變化之后，才執行代碼塊的內容。

自定義異步遍歷器：

let obj = {count: 0, Gen (time) {return new Promise(function (resolve, reject) {setTimeout(function () {resolve({ done: false, value: time })}, time)})}, [Symbol.asyncIterator] () {let self = thisreturn {next () {self.count++if (self.count < 4) {return self.Gen(parseInt(Math.random() * 1000))} else {return Promise.resolve({done: true,value: ''})}}}} }async function test () {for await (let item of obj) {console.log(item)} } test() // 打印出3個隨機數

總結

以上是生活随笔為你收集整理的【ES9(2018)】for await...of的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。