从零开始学_JavaScript_系列（53）——Generator函数(1)基本概念和示例

忘是亡心i 2022-06-10 14:37 142阅读 0赞

### 1、Generator基本概念 ###

注：【遍历器】和【迭代器】是一个意思。

#### 1.1、表象： ####

1.  函数名有个星号（就是乘号\*）；
2.  函数体内部使用yield表达式（yield翻译成中文：产生）；
3.  函数调用后返回值是一个遍历器对象，该对象可以调用next方法遍历yield表达式返回的值；
4.  函数内部可有返回值，也可以没有（这个影响的是遍历器遍历到第一次done为true时，value的值是什么）；
5.  函数执行后并不直接执行函数内部代码，而是返回一个遍历器（参考上一章Iterator），但注意，他本身并没有`[Symbol.iterator]`属性

简单来理解，就是当函数名前面有星号时，调用函数的时候不会运行该函数，而是返回一个遍历器，该遍历器通过调用next方法可以遍历执行函数内部的语句，每次执行到yield表达式（或执行到函数结束）为止；

如示例代码：

function* foo() {   // 星号在function关键词和函数名之间 yield 'first'; // yield表达式表示会被遍历到的内容 let second = 'sec'; // 函数内部可以有正常的js语句 yield second + 'ond'; // yield表达式只关心该表达式的返回值（即"second"字符串） return 'last' // 可以有return返回值也可以没有 } foo[Symbol.iterator]; // undefined，说明没有这个属性 let bar = foo();
    // bar:
    // {
       [[GeneratorStatus]]: "suspended"}
    // 原型链上有next、return、throw三个方法
    
    bar.next(); // {value: "first", done: false}
    bar.next(); // {value: "second", done: false}
    bar.next(); // {value: "last", done: true}  如果没有return，那么这里的value是undefined
    bar;    // {
       [[GeneratorStatus]]: "closed"}  出现done之后才会closed

#### 1.2、运行： ####

**函数本身的运行：**

1.  Generator函数可以视为一个状态机；
2.  简单来说，就是内部可能有A、B、C状态，初始是空状态，然后通过多次调用next方法，依次切换到A、B、C状态；
3.  当之后没有其他状态时，调用next方法返回的对象的done属性的值为true；

这三句话可能比较抽象，可以结合下面代码的执行来理解：

**代码的执行：**

1.  直接调用本函数，并不会执行函数内部的代码，而是返回一个遍历器；
2.  此时什么都不执行，直到调用该遍历器的next方法为止；
3.  第一次调用next时，从函数内部第一行开始执行，直到遇见yield表达式为止，输出yield表达式的值（即yield所在的那一段js语句的返回值）；
4.  第二次调用next时，从上一次yield表达式停止的地方开始继续执行，直到再次遇见yield表达式，或者到函数的结尾，或遇见return后停止；
5.  注意，是执行到yield表达式为止，而不是yield所在的那一行代码，典型情况是：`console.log(yield "test");`其中的console.log是不执行的；
6.  每次执行next()后，返回值的是一个对象，有value属性和done属性，参考Iterator，其中value的值是yield表达式的值；
7.  当结束到结尾时，或者遇见return时，done会变为true，在此之前，done为false；
8.  done变为true，没必要继续调用next了（就像Iterator接口那样）；

首先，当然是上示例代码啦：

function* foo() { 
        let a = 1;
        console.log('第一次执行')
        yield a;
        a++;
        console.log(yield "test");
        a *= 2;
        return a
    }
    
    // 调用foo()
    let bar = foo();
    // 此时没有输出任何东西，bar的值
    
    // 第一次调用next()，下面的两行注释，其中第一行是console.log，第二行是返回值****
    bar.next();
    // 第一次执行
    // {value: 1, done: false}
    
    // 第二次调用next()，注意，这个时候没执行yield "test"外面的console.log
    bar.next();
    // {value: "test", done: false}
    
    // 第三次调用next()，这个时候执行了console.log()，但显然由于yield之前已经执行了，所以参数是空
    // 遇见return了，所以done变为true，value的值是return的返回值
    bar.next();
    // undefined
    // {value: 4, done: true}

看注释，就懂代码怎么执行的了。

另外提一句，每次通过foo()生成的遍历器，都是独立的，他们之间不会互相影响。

#### 1.3、yield关键字 ####

首先，yield在非Generator函数内不是关键字，只有在Generator函数内才是关键字，可以通过赋值，然后不会报错来证明。

因此，不要试图在非Generator函数内部的场合使用yield，肯定会报错的啦。

let yield = 1;
    console.log(yield);   //1

#### 1.4、yield表达式的值 ####

yield表达式起到的是暂停函数执行的作用，**该表达式的值是下一次调用next()时作为参数传入的值，默认情况下是undefined**。

原因在于，每次执行到yield表达式时就会终止，等到下次执行的时候，相当于yield表达式所在的地方为空（上次执行过了，所以这次不会再执行一遍），所以值undefined。

那么怎么让yield表达式有值呢？答案是通过遍历器的next()方法的参数来传入。该参数将作为上一个yield表达式的值来使用；

另外提一句，由于第一次调用next()时，之前是没有yield表达式的，所以如果想在初始化的时候就输入值，需要进行特殊化处理，比如外面包一层，或者放弃第一次next输入参数，空调用一次next()来实现（这个也是外面包一层的实现原理）

如示例代码（引自阮一峰的）：

// 包一层
    function wrapper(generatorFunction) { 
      return function (...args) { 
        let generatorObject = generatorFunction(...args);
        generatorObject.next();
        return generatorObject;
      };
    }
    
    const wrapped = wrapper(function* () { 
      console.log(`First input: ${
       yield}`);
      return 'DONE';
    });
    
    wrapped().next('hello!')
    // First input: hello!
    // {value: "DONE", done: true}

// 空调用一次next()
    function* dataConsumer() { 
        console.log(`1. ${
       yield}`);
        console.log(`2. ${
       yield}`);
        return 'result';
    }
    
    let genObj = dataConsumer();
    genObj.next();
    genObj.next('a')
    // 1. a
    genObj.next('b')
    // 2. b

最后，yield表达式如果单独使用，那么不需要括号，如果要将yield表达式与其他变量进行运算，那么需要使用圆括号将其括起来（如上面的示例）；

#### 1.5、Generator的简写 ####

普通函数作为对象属性的时候可以简写，Generator函数作为对象属性的时候，虽然多了一个星号，但也可以简写，简写方法是将星号放在属性名前即可

如代码：

let foo = {
        * [Symbol.iterator]() {
            // some code
    
        }
    }