生成器函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同
image.png

代码说明:
1) 的位置没有限制
2) 生成器函数返回的结果是*迭代器对象
,调用迭代器对象的 next 方法可以得到yield 语句后的值
3) yield 相当于函数的暂停标记,也可以认为是函数的分隔符,每调用一次 next方法,执行一段代码
4) next 方法可以传递实参,作为 yield 语句的返回值

image.png

image.png

执行.next() 会返回 yield后面的语句或者变量或者直接量:
image.png

参数传递

第n个next的参数,作为生成器函数内,第n-1个yield的返回结果,如下图所示,第二个next传入BBB作为 gen内第一个yield的返回结果。
arg作为gen的参数,在第一次调用next的时候才会打印执行,以为它是第一个段的内容
image.png

实例

主要用于异步编程

原始写法,不断回调
image.png
有了生成器之后:
image.png
这个例子,演示了生成器的写法,但是或许有点问题,因为iterator的调用变得混乱,在多个函数中都有

实例二:

  1. //模拟获取 用户数据 订单数据 商品数据
  2. function getUsers(){
  3. setTimeout(()=>{
  4. let data = '用户数据';
  5. //调用 next 方法, 并且将数据传入
  6. iterator.next(data);
  7. }, 1000);
  8. }
  9. function getOrders(){
  10. setTimeout(()=>{
  11. let data = '订单数据';
  12. iterator.next(data);
  13. }, 1000)
  14. }
  15. function getGoods(){
  16. setTimeout(()=>{
  17. let data = '商品数据';
  18. iterator.next(data);
  19. }, 1000)
  20. }
  21. function * gen(){
  22. let users = yield getUsers();
  23. let orders = yield getOrders();
  24. let goods = yield getGoods();
  25. }
  26. //调用生成器函数
  27. let iterator = gen();
  28. iterator.next();