从今天开始,小编和大家一起聊一聊ES9中的新特性和新语法。这些语法和新特性在小编实际项目用的时候,用到的并不多,这篇之后,小编准备把文章作为类似字典的东西,以后项目用到的,或者其他人写代码的时候,至少先混个脸熟。就像我前天看到的一句话一样,好代码50%是给机器运行的,另50%是给人看的,相信大家以后写的代码会越来越好,小编会和大家一起进步。大家还可以关注我的微信公众号,蜗牛全栈。
一、同步迭代器:在之前的文章中,小编更新过一篇关于es6关于可迭代协议 迭代器协议的文章,可以看看小编的这篇文章《ES6中的Module与Interator》,下面我就简单写个例子。
const arr = ["es6","es7","es8","es9"] arr[Symbol.iterator] = function(){ let nextIndex = 0 return { next(){ return nextIndex < arr.length ? { value:arr[nextIndex++], done:false }:{ value:undefined, done:true } } } } for(let item of arr){ console.log(item) // es6 es7 es8 es9 }
二、异步迭代器
1、普通for...of...循环异步
function getPromise(time){ return new Promise((resolve,reject) => { setTimeout(() => { resolve(time) }) },time) } const arr = [getPromise(1000),getPromise(2000),getPromise(3000)] for(let item of arr){ console.log(item) // Promise{pending} Promise{pending} Promise{pending} }
2、异步循环:使用关键字asyncIterator
function getPromise(time){ return new Promise((resolve,reject) => { setTimeout(() => { resolve(time) }) },time) } const arr = [getPromise(1000),getPromise(2000),getPromise(3000)] for(let item of arr){ console.log(item) // Promise{pending} Promise{pending} Promise{pending} } function getPromise(time){ return new Promise((resolve,reject) => { setTimeout(() => { resolve({ value:time, done:false }) }) },time) } const arr = [getPromise(1000),getPromise(2000),getPromise(3000)] arr[asyncIterator] = function(){ let nextIndex = 0 return { next(){ return nextIndex < arr.length ? arr[nextIndex++]:Promise.resolve({ // 相当于Promise的静态方法,返回成功状态的Promise对象 value:undefined, done:true }) } } } for(let item of arr){ console.log(item) // Promise{pending} Promise{pending} Promise{pending} } // 等到上一次异步执行成功之后再进行下一个异步操作 async function test(){ for await (let item of arr){ console.log(item) } } test() // 1000 2000 3000