什么是迭代器？

迭代器（iterator）是浏览器不便遍历有法则的对象的非凡函数。对！它是一个函数。

先暂且不论这个函数是如何实现的，以下代码我置信大家再相熟不过了：

之所以arr能通过for of顺次打印出a站，b站，是因为数组原型链上都蕴含有这么一个迭代器函数,咱们通过Symbol.iterator这个非凡的类型去获取如下：

[native code]意思为浏览其原生实现，已被编译为特定于处理器的机器码的代码，通过优化解决，其运行效率高。

能够看到，数组和原型链上都蕴含这个name为values的函数，能够发现数组arr的迭代器函数全等于Array原型链上的迭代器函数，学习过原型链继承的同学就灰常了解了。

独一无二，在ES6新增的Map、Set对象中都有迭代器的影子，咱们也能够用for of函数迭代他们的实例：

天然，他们也都有本人的迭代器函数:

配合开展操作符(...)应用,请留神看打印的内容：

由此可见，如果一个对象含有迭代器函数（iterator）那么它就是一个可迭代的对象，能够用for of 或者 ...扩大操作符。

for of外部是如何一个元素一个元素的获取的呢？

答案是通过调用next办法，调用迭代器函数返回的实例（对象）的next办法：

每次调用next就获取一个值，当获取到的done状态为true时，调用完结

如何本人实现一个可迭代对象呢？

请看代码：

要害1：iterator函数必须返回一个含有next属性的对象。
要害2：next属性是一个办法，且必须返回一个对象{value:'value',done:true/false }。value代表每次迭代返回的值，done决定了迭代是否完结。如果done永远为true，那么迭代将永不能进行。

什么是Generator？

Generator是一个对象，是由生成器函数 (generator function)返回的，并且它合乎可迭代协定和迭代器协定。

generator function函数是在一般的函数名称前加一个*号，且函数外部应用yeild关键词定义函数断点，让函数从上到下分批次执行并返回值。

既然myGenerator实例能够应用for of进行迭代，那他是否像Array数组一样领有iterator函数呢？咱们用[Symbol.iterator]属性取值看看：

不出所料，生成器函数生成的generator对象一样领有可迭代函数。

应用Generator从新革新`iterableObj`

革新前：

革新后：

应用generator，让异步代码像同步代码一样执行

Promise的呈现，让程序员辞别了苦楚的回调天堂，书写异步代码像这样：

编码起来还算舒坦，但还有更难受的姿态：

函数写好了，然而*getData()函数怎么调用呢？来一起看下

咱们发现，通过next()函数进行迭代调用的时候，返回的value是promise，并不是想要的执行后的1,2,3，所以咱们能够调用then办法获取断言后的值，看以下代码：

代码中咱们通过promise链式调用形式，保障上一个申请实现后再进行下一个next的调用。须要留神的是，在第一次打印value1后，须要把的value1作为下一次调用next的参数，否则DataA获取到的是undefined。

仔细的敌人曾经留神到了，在getData生成器函数中yeild关键词呈现了3次，然而next调用了4次，为什么不是一个yeild对应一个next呢？

yeild好比是绳子上的一个结，一根绳子分成两半只须要一个结，即作左局部和右局部。已知一根绳子上有3个结，请问绳子一共分为几局部？体育老师教的同学都晓得是4。

generator调用其实就是按法则执行next办法，把上一次执行的后果作为next函数的参数。那么封装一个函数主动去执行generator实例，不必每次写一堆代码去挨着调用next。

如何让generator主动执行，如何封装？

封装一个函数，把生成器函数getData作为参数，递归调用next办法，简要代码请看：

其实赫赫有名的co库晚期就是用相似的形式，当然co框架还思考到其它非常复杂的状况，例如异样谬误。

async await来了

async await语法糖就是为了不便异步编程像同步编程那样书写代码，不必co库，只须要在函数前加async标识代表生成器函数，用await代替yeild关键词。不必再思考generator实例如何调用next办法了。太香了！

小结：

咱们理解了迭代器的基本概念，晓得了Array、Map、Set在原型链中都有迭代器，能够通过[Symbol.iterator]拜访。
晓得了迭代器对象的个性，含有next办法，且办法中必须返回value 和done属性。最初给一个一般{}对象，增加了本人实现的iterator，让其能够通过for of迭代执行。
Genetator是es6中新引入的对象，不能间接实例化，须要通过生成器函数（函数名称前增加*）返回。iterator迭代对象和generator实例一样都应用next办法迭代。最初通过Genetator新语法重写了iterator，达到for of遍历的目标。
本人封装了相似co模块的函数，让迭代器主动执行，让异步代码同步书写成为可能。
es7的async和await语法糖让异步办法同书写变得更加简洁和容易。

往期文章：

开发微信小程序的经验总结，UI组件、图表、自定义bar全搞定

请不要忘了给我点赞、评论、珍藏。托付了！