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. 参考
相关推荐
我命由我1234528 分钟前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js
0wioiw028 分钟前
Flutter基础(前端教程③-跳转)
前端·flutter
落笔画忧愁e31 分钟前
扣子Coze纯前端部署多Agents
前端
海天胜景33 分钟前
vue3 当前页面方法暴露
前端·javascript·vue.js
GISer_Jing41 分钟前
前端面试常考题目详解
前端·javascript
Boilermaker19922 小时前
【Java EE】SpringIoC
前端·数据库·spring
中微子2 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10242 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y2 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁2 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js