Generator函数、yield表达式、next方法在yield中的使用

Myth丶恋晨 2022-05-16 23:53 282阅读 0赞

## 1、Generator函数：异步编程解决方案 ##

语法上：一个状态机（封装了多个内部状态，返回遍历器对象生成函数）

形式上：一个函数

①function关键字与函数名之间有一个\*星号

②函数体内部使用yield表达式定义不同的内部状态

// 产出3个状态，返回一个指向内部状态的指针对象
    
    function * helloWorldGenerator(){
    
    yield ‘hello’; //  hw.next() --> { value: 'hello', done: false }
    
    yield ‘world’;    //  hw.next() -->  { value: 'world', done: false }
    
    return ‘ending’;  //  hw.next().next() --> { value: undefined, done: true }
    
    }
    
    var hw=helloWorldGenerator();

# #

## 2、yield表达式:暂停标志，每次next到yield就暂停执行 ##

①只能用在generator函数里面，如果要将yield用在循环里，不能用forEach，要用for。因为forEach方法的参数是一个普通函数

②yield表达式如果用在另一个表达式中，必须放在()圆括号里面

function* demo() {
    
      console.log('Hello' + yield); // SyntaxError  
    
      console.log('Hello' + yield 123); // SyntaxError
    
      console.log('Hello' + (yield)); // OK  
    
      console.log('Hello' + (yield 123)); // OK
    
    }

③yield表达式用作函数参数或放在赋值表达式的右边，可以不加括号。

function* demo() {
      foo(yield 'a', yield 'b'); // OK  
      let input = yield; // OK
    }

④一个函数只能执行一次return语句，但是可以执行多次yield表达式

## 3、next方法的参数： ##

## ①第一次调用a.next()无法输出参数 ##

## ②每次a.next(赋值)都等于函数体里面yield表达式的值 ##

function* foo(x) {
      var y = 2 * (yield (x + 1));
      var z = yield (y / 3);
      return (x + y + z);
    }
    
    var a = foo(5);
    a.next() // Object{value:6, done:false}
    a.next() // Object{value:NaN, done:false}
    a.next() // Object{value:NaN, done:true}
    
    var b = foo(5);
    b.next() // { value:6, done:false }
    b.next(12) // { value:8, done:false }
    b.next(13) // { value:42, done:true }

上面代码中，第二次运行`next`方法的时候不带参数，导致 y 的值等于`2 * undefined`（即`NaN`），除以 3 以后还是`NaN`，因此返回对象的`value`属性也等于`NaN`。第三次运行`Next`方法的时候不带参数，所以`z`等于`undefined`，返回对象的`value`属性等于`5 + NaN + undefined`，即`NaN`。

如果向`next`方法提供参数，返回结果就完全不一样了。上面代码第一次调用`b`的`next`方法时，返回`x+1`的值`6`；第二次调用`next`方法，将上一次`yield`表达式的值设为`12`，因此`y`等于`24`，返回`y / 3`的值`8`；第三次调用`next`方法，将上一次`yield`表达式的值设为`13`，因此`z`等于`13`，这时`x`等于`5`，`y`等于`24`，所以`return`语句的值等于`42`。

注意，由于`next`方法的参数表示上一个`yield`表达式的返回值，所以在第一次使用`next`方法时，传递参数是无效的。V8 引擎直接忽略第一次使用`next`方法时的参数，只有从第二次使用`next`方法开始，参数才是有效的。从语义上讲，第一个`next`方法用来启动遍历器对象，所以不用带有参数。

再看一个通过`next`方法的参数，向 Generator 函数内部输入值的例子。

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

上面代码是一个很直观的例子，每次通过`next`方法向 Generator 函数输入值，然后打印出来。

如果想要第一次调用`next`方法时，就能够输入值，可以在 Generator 函数外面再包一层。

上面代码中，Generator 函数如果不用`wrapper`先包一层，是无法第一次调用`next`方法，就输入参数的。