码迷,mamicode.com
首页 > 其他好文 > 详细

ES6知识点-Generator

时间:2019-12-17 22:40:32      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:回调   分段   调用   foo   就会   内部使用   一个   结果   另一个   

4.2Generator函数

4.2.1定义Generator函数

  • 通过 yield 关键字,把函数的执行流挂起,为改变执行流程提供了可能,从而为异步编程提供解决方案。
  • 形式上,Generator函数是一个普通函数,但是有两个特征。
    • function关键字与函数名之间有一个星号
    • 函数体内部使用yield语句,定义不同的内部状态(yield翻译为汉语的意思就是“产出”)
function* func() {
  yield 'hello';
  yield 'world';
  return 'ending';
}
var hw = func();
  • Generator函数的调用方法与普通函数一样

  • 不同的是,调用Generator函数后该函数并不执行返回的也不是函数运行结果,而是一个指向内部状态的指针对象,也就是遍历器对象(Iterator Object)

4.2.2next方法

  • Generator函数是分段执行的,yield语句是暂停执行的标记,而next方法可以恢复执行
hw.next()
// { value: 'hello', done: false }
hw.next()
// { value: 'world', done: false }
hw.next()
// { value: 'ending', done: true }
hw.next()
// { value: undefined, done: true }
//代码说明:
//上面代码一共调用了四次next方法:
/*
    第一次调用,Generator函数开始执行,直到遇到第一个yield语句为止。next方法返回一个对象,它的value属性就是当前yield语句的值hello,done属性的值false,表示遍历还没有结束。
    第二次调用,Generator函数从上次yield语句停下的地方,一直执行到下一个yield语句。next方法返回的对象的value属性就是当前yield语句的值world,done属性的值false,表示遍历还没有结束。
    第三次调用,Generator函数从上次yield语句停下的地方,一直执行到return语句(如果没有return语句,就执行到函数结束)。next方法返回的对象的value属性,就是紧跟在return语句后面的表达式的值(如果没有return语句,则value属性的值为undefined),done属性的值true,表示遍历已经结束。
    第四次调用,此时Generator函数已经运行完毕,next方法返回对象的value属性为undefined,done属性为true。以后再调用next方法,返回的都是这个值。
*/
  • 总结
    • 调用Generator函数,返回一个遍历器对象,代表Generator函数的内部指针
    • 以后,每次调用遍历器对象的next方法,就会返回一个有着value和done两个属性的对象。
    • value属性表示当前的内部状态的值,是yield语句后面那个表达式的值;done属性是一个布尔值,表示是否遍历结束。

4.2.3yield语句

? yield语句就是暂停标志。

  • ? 遍历器对象的next方法的运行逻辑如下:

    (1)遇到yield语句就暂停执行后面的操作,并将紧跟在yield后面的表达式的值作为返回的对象的value属性值。

    (2)下一次调用next方法时,再继续往下执行,直到遇到下一个yield语句。

    (3)如果没有再遇到新的yield语句,就一直运行到函数结束,直到return语句为止并将return语句后面的表达式的值,作为返回的对象的value属性值。

    (4)如果该函数没有return语句,则返回的对象的value属性值为undefined

  • yield语句与return语句对比

    • 相似之处 都能返回紧跟在语句后面的表达式的值
    • 区别
      • 每次遇到yield,函数暂停执行,下一次再从该位置继续向后执行,而return语句不具备位置记忆的功能。
      • 一个函数里面,只能执行一次(或者说一个)return语句,但是可以执行多次(或者说多个)yield语句
      • 正常函数只能返回一个值,因为只能执行一次return;Generator函数可以返回一系列的值,因为可以有多个yield。

4.2.4for...of循环

  • for...of循环可以自动遍历Generator函数时生成的Iterator对象,且此时不再需要调用next方法。

  • 一旦next方法的返回对象的done属性为true,for...of循环就会中止,且不包含返回对象

  • function* foo() {
      yield 1;
      yield 2;
      yield 3;
      yield 4;
      return 5;
    }
    
    for (let i of foo()) {
      console.log(i);
    }
    
    // 1 2 3 4
    //结果分析:为什么没有返回5?
    //一旦next方法的返回对象的done属性为true,for...of循环就会中止,且不包含该返回对象

4.2.5yield*语句

  • 要用到 yield* 语句,用来在一个Generator函数里面执行另一个Generator函数

    function* foo() {
      yield 'a';
      yield 'b';
    }
    function* bar() {
      yield 'x';
      yield* foo();    // 使用 yield* 才有效,直接写入foo()无效
      yield 'y';
    }
    //  等同于
    function* bar() {
      yield 'x';
      yield 'a';
      yield 'b';
      yield 'y';
    }

4.2.6Generator应用

  • 异步操作的同步化表达

    • Generator函数的暂停执行的效果,意味着可以把异步操作写在yield语句里面,等到调用next方法时再往后执行
    • 实际上等同于不需要写回调函数了。因为异步操作的后续操作可以放在yield语句下面,反正要等到调用next方法时再执行

    • 这种写法的好处是所有Loading界面的逻辑,都被封装在一个函数。按部就班,非常清晰。

    function* loadUI() {
      show();
      yield loadYield();
      hide();
    }
    var loader = loadUI();
    // 加载UI
    loader.next()
    // 卸载UI
    loader.next()

ES6知识点-Generator

标签:回调   分段   调用   foo   就会   内部使用   一个   结果   另一个   

原文地址:https://www.cnblogs.com/xuzhengguo/p/12057016.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!