【ES9(2018)】for await...of
for of ... 2018 await
2023-09-11 14:19:17 时间
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 = this
return {
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个随机数
相关文章
- [Typescript] Simplify iteration of custom data structures in TypeScript with iterators (backwards iteration with for ... of.. loop)
- [Javascript] Iterate Over Items with JavaScript's for-of Loop
- [Javascript] Create an Async Generator and Loop Through Generated Promises with "For Await Of" Loops
- [ES2018] Two ways to write for-await-of
- [TypeScript] Asynchronous Iteration using for-await-of
- [HTML5] Using the tabindex attribute for keyboard accessibility
- [Cycle.js] Generalizing run() function for more types of sources
- [ES6] 19. for ... of
- [AngularJS] Angular 1.3 $submitted for Form in Angular
- [Mobi] TWRP 镜像 for OnePlus X
- SAP Cloud for Customer页面根据后台数据响应的刷新原理介绍
- No cached version of com.android.tools.build:gradle:2.3.3 available for offline mode. Disable Gradle
- Paper:《BERT: Pre-training of Deep Bidirectional Transformers for Language Understanding用于语言理解的深度双向Tr
- Sizes of tensors must match except in dimension 1. Expected size 24 but got size 25 for tensor numbe
- Javascript 中 的 for ... in 和 for ... of 差别
- bash shell for循环1到100 .
- RuntimeError: shape ‘[4]‘ is invalid for input of size 6
- 论文笔记:An Experimental Comparison of Performance Metrics for Event Detection Algorithms in NILM(1)
- MySQL错误:Access denied for user ‘root‘@‘%‘ to database ‘dbname‘
- 解决FileZilla_Server:425 Can“t open data connection for transfer of “/“