es6 中的生成器 generator / 迭代器 / async /await 到底是个啥,使用场景

生成器 generator 到底是个啥

  1. 是一个函数
    1. 可以用来遍历数据结构
    2. 是解决异步编程的一种方案
    3. 进行数据流的生成和控制
    4. 协程和状态机
  2. 返回一个生成器对象/可迭代对象
    1. 生成器对象: 生成器对象是由生成器函数返回的对象,它符合迭代器协议(Iterator Protocol)。生成器对象具有 next() 方法,用于启动生成器函数的执行,并在每次调用时返回一个包含 valuedone 属性的对象
    2. 可迭代对象: 可迭代对象是具有迭代器的对象,它符合可迭代协议(Iterable Protocol)。可迭代对象通常是包含有限或无限序列的数据结构,例如数组、集合、映射等。可迭代对象可以通过 for...of 循环或 ... 扩展运算符等方式进行迭代
    3. 生成器对象是一种特殊的可迭代对象,因为它们符合迭代器协议。
  3. function 关键字和函数名之间有一个*型号
  4. 函数内部使用 yield 表达式,定义不同的内部状态
  5. 通过 next 方法才会遍历到 下一个内部状态
  6. 调用生成器之后的可迭代对象的Symbol.iterator属性,返回它自身
  7. 可以是用 for ...of 遍历 生成器的运行结果,因为是一个可迭代对象
  8. 可以通过生成器把对象变成可迭代对象,参考这篇文章,真的超级好用
  9. 异步解决方案
    1. Generator不是为了异步设计出来的,他还有其他功能
      1. 对象迭代
      2. 控制输出,使用 yield 暂停
      3. 部署iterator接口
    2. promise 和 async/await 是专门用于处理异步数据的
    3. generator ,async 需要与promise 对象搭配处理异步情况
    4. async 实质是 generator 的语法糖,相当于会自动执行 generator 函数
      1. 语法糖是一种编程语言中常用的概念,指的是对语言的语法进行改进或扩展、以便更方便,更易读,更符合人类直觉的方式编写代码,但并不改变语言的基本功能或语义。简单来说,语法糖是一种语法上的美化,它并不引入新的功能,只是让代码更易于理解和书写。
      2. ?:三元运算符是if-else 结构的语法糖
    5. await 是用于异步函数中的关键字,他是 yield 的语法糖
    6. async/await 约等于 generator + promise
    7. async/await 将异步变成串行执行
    8. async 返回一个promise 函数
  10. 生成器可以看作是一个更加灵活的迭代器

生成器的使用场景

  1. 把对象变成迭代对象,再对象上实现 iterator 接口
  2. 异步解决的一种方案,使用 async 语法糖
  3. 实现遍历
  4. 实现状态机
    1. 状态机,用于描述程序的行为和状态转换。
    2. 没调用一次生成器对象切换一个状态

迭代器Iterator是个啥

  1. Iterator 是一个循环接口,任务实现了这个接口的数据都可以被 for ... of 遍历
  2. 循环语句调用对象的 data[Symbol.iterator] 函数,根据返回值来进行循环
  3. 任何提供了 Iterator 接口的就可以被循环
  4. 参考
相关推荐
kyle~1 分钟前
python---PyInstaller(将Python脚本打包为可执行文件)
开发语言·前端·python·qt
User:你的影子7 分钟前
WPF ItemsControl 绑定
开发语言·前端·javascript
会有钱的-_-29 分钟前
基于webpack的场景解决
前端·vue.js·webpack·安全性测试
LFly_ice1 小时前
学习React-10-useTransition
前端·学习·react.js
咔咔一顿操作1 小时前
【CSS 3D 交互】实现精美翻牌效果:从原理到实战
前端·css·3d·交互·css3
知识分享小能手1 小时前
React学习教程,从入门到精通,React 构造函数(Constructor)完整语法知识点与案例详解(16)
前端·javascript·学习·react.js·架构·前端框架·vue
召摇1 小时前
Nue.js深度解析:极简主义前端框架的革新实践
前端·node.js
小徐_23331 小时前
uni-app 也能使用 App.vue?wot-starter 是这样实现的!
前端·uni-app
入秋1 小时前
Three.js后期处理实战:镜头颜色、色差、点阵与颜色管道的深度解析
前端·three.js
深圳外环高速1 小时前
企业微信和页面离开事件
前端