ES6 Generator 函数

简介

Generator函数是ES6提供的一种异步编程解决方案，最大的特色就是 ： 能够交出函数的执行权 （即暂停执行）。

形式上 ， Generator函数是一个普通函数 ， 可是有两个特征 ：

1. function 关键字与函数名之间有一个 （ * ）。
2. 函数内部使用 yield 语句， 定义不一样的内部状态。

定义及调用

• 函数声明

ES6没有规定，function关键字与函数名之间的星号，写在哪一个位置。这致使下面的写法都能经过。

function * foo(x, y) { ··· }

     function *foo(x, y) { ··· }

     function* foo(x, y) { ··· }

     function*foo(x, y) { ··· }
复制代码

• 函数表达式

  let foo = function * (){ ... }
  复制代码

• 函数调用

Generator 函数的调用方法与普通函数同样，也是在函数名后面加上一对圆括号。不一样的是，调用Generator函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象===》遍历器对象（Iterator Object）。

下一步，必须调用遍历器对象的next方法，使得指针移向下一个状态。也就是说，每次调用next方法，内部指针就从"函数头部或上一次停下来的地方"开始执行，直到遇到下一个yield语句（或return语句）为止。

function * fn(){
            yield "one";
            yield "two";
            return "last";
     }
     
       let e = fn();
       console.log(e.next()); // {value: "one", done: false}
       console.log(e.next()); // {value: "two", done: false}
       console.log(e.next()); // {value: "last", done: true}
       console.log(e.next()); // {value: undefined, done: true}
复制代码

value属性表示当前的内部状态的值，是yield语句后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。

yield 语句

yield语句就是暂停标志

遍历器对象的next方法的运行逻辑以下：

1. 遇到yield语句，就暂停执行后面的操做，并将紧跟在yield后面的那个表达式的值，做为返回的对象的value属性值。
2. 下一次调用next方法时，再继续往下执行，直到遇到下一个yield语句。
3. 若是没有再遇到新的yield语句，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，做为返回的对象的value属性值。
4. 若是该函数没有return语句，则返回的对象的value属性值为undefined。

注意 ：

• Generator函数能够不用yield语句，这时就变成了一个单纯的暂缓执行函数。

  function * fn(){
             console.log("hahaha")
     }
      let generator = fn();
      setTimeout(function(){
           generator.next()
      },2000)
  复制代码

• yield语句不能用在普通函数中，不然会报错。

next方法的参数

yield句自己没有返回值，或者说老是返回undefined。next方法能够带一个参数，该参数就会被看成上一个yield语句的返回值。

注意了 ： 是上一个yield 语句的返回值 ， 这一点在循环中比较容易搞混。

function* f() {
        for(var i=0; true; i++) {
             var reset = yield i;
             if(reset) { i = -1; }
         }
     }

     var g = f();

     g.next() // { value: 0, done: false }
     g.next() // { value: 1, done: false }
     g.next(true) // { value: 0, done: false }
     // 第三步的true会当作上一个yield语句的返回值 ， 也就是说 i会先赋值为 -1 ，而后 i++ 变为 0 输出。
复制代码

for ... of 循环

for...of循环能够自动遍历Generator函数时生成的Iterator对象，且此时再也不须要调用next方法。

function *foo() {
             yield 1;
             yield 2;
             yield 3;
             yield 4;
             yield 5;
             return 6;
     }

     for (let v of foo()) {
             console.log(v);
     }
     // 1 2 3 4 5
复制代码

一旦next方法的返回对象的done属性为true，for...of循环就会停止，且不包含该返回对象，因此上面代码的return语句返回的6，不包括在for...of循环之中。可是 ， 若将 6 换为yield 则会输出 ， 由于此时 done 为 false。

除了for...of循环之外，扩展运算符（...）、解构赋值和Array.from方法内部调用的，都是遍历器接口。这意味着，它们均可以将Generator函数返回的Iterator对象，做为参数。

// 扩展运算符
     
     [...fn()] // [1,2,3,4,5]
     
     // Array.from() 方法
     
     Array.from(fn()) // [1,2,3,4,5]
     
     // 解构赋值
     
     let [x,y,z] = fn()
     // x 1 y 2 z3
复制代码

Generator.prototype.throw()

Generator函数返回的遍历器对象，都有一个throw方法，能够在函数体外抛出错误，而后在Generator函数体内捕获。

function * fn(){
           try {
               yield
           }catch(e){
               console.log('内部捕获',e.message)
     }
     }
     var i = fn()
     i.next() 
     try{
        i.throw(new Error('你说你错了'))
        i.throw('不走心那')
     }catch(e){
         console.log("外部捕获",e)
     }
     
     // 内部捕获 你说你错了
     // 外部捕获 不走心那
复制代码

Generator.prototype.return()

Generator函数返回的遍历器对象，还有一个return方法，能够返回给定的值，而且终结遍历Generator函数。

function * fn(){
         yield 1;
         yield 2;
         yield 3;
     }
      let g = fn();

      console.log(g.next())  // {value: 1, done: false}
      console.log(g.return(10)) //{value: 10, done: true}
      console.log(g.next()) // {value: undefined, done: true}
复制代码

若是return方法调用时，不提供参数，则返回值的value属性为undefined。

yield*语句

若是在Generater函数内部，调用另外一个Generator函数，默认状况下是没有效果的。 这个就须要用到yield*语句，用来在一个Generator函数里面执行另外一个Generator函数。

function* foo() {
            yield 'a';
            yield 'b';
     }

     function* bar() {
            yield 'x';
            foo();
            yield 'y';
     }
     function* bar() {
         yield 'x';
         yield* foo();
         yield 'y';
     }
     
     // "x"
     // "a"
     // "b"
     // "y"
复制代码