什么是迭代器？

迭代器 （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 办法了。太香了！

小结：

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

往期文章：

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

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