对Iterator、await/async 和 Generators的理解和区别

古城微笑少年丶 2022-12-04 08:55 99阅读 0赞

###### 一、具体认识([这个链接讲解的非常详细][Link 1]) ######

1.  Iterator

> 简单的说，我们常用的 for in 循环，都是通过调用被循环对象的一个特殊函数 Iterator 来实现的，但是以前这个函数是隐藏的我们无法访问， 从 Symbol 引入之后，我们就可以通过 Symbol.iterator 来直接读写这个特殊函数。

> 对于循环语句来说，他并不关心被循环的对象到底是什么，他只负责调用 data\[Symbol.iterator\] 函数，然后根据返回值来进行循环。所以任何对象只要提供了标准的 Iterator 接口即可被循环.

> 其实解构赋值用到的原理就是iterator和可迭代对象

1.  Generators[这个地方也是一篇文章，值得参考，讲的很详细][Link 2]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70_pic_center]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70_pic_center 1]
2.  await/async  
    我最开始接触到 Async/Await 的时候把它当成了一个 promise 的语法糖，但是经过我们对 Generator 的理解后，明白了其实他就是 Generator 的一个语法糖：  
    *async 对应的是 \*  
    await 对应的是 yield  
    他只是自动帮我们进行了 Generator 的流程控制而已。*

> 因为有自动的流程控制，所以我们不用手动在ajax成功的时候手动调用 next。相比于 Promise 或者 Generator 的实现，代码要明显更加优雅。可以参考一下 Babel 是如何编译 Async/Await 的，简单的说，代码分成了两部分，一部分是编译了一个 Generator，另一部分是通过 promise 实现了generator的流程控制。

###### 二、总结的不同 ######

1.Iterator 是一个循环接口，任何实现了此接口的数据都可以被 for in 循环遍历

2.Generator 是一个可以暂停和继续执行的函数，他可以完全实现 Iterator 的功能，并且由于可以保存上下文，他非常适合实现简单的状态机。另外通过一些流程控制代码的配合，可以比较容易进行异步操作。

3.Async/Await 就是generator进行异步操作的语法糖。而这个语法糖反而是被使用最广泛的，比如著名的 Koa

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70_pic_center 2]

[Link 1]: https://github.com/lihongxun945/myblog/issues/3
[Link 2]: https://juejin.im/post/6844903683872784391#heading-30
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/25446d450cf3485cb07521377e3ba7e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/14478eb2584f4d13b51e2c3e500d0bee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/b0188487e031479ab65101b9e22d27e8.png