ES6之Generator函数

快来打我* 2022-12-14 15:53 191阅读 0赞

Generator 函数是一个状态机，封装了多个内部状态。

一是，`function`关键字与函数名之间有一个星号；

二是，函数体内部使用`yield`表达式，定义不同的内部状态。

function* helloWorldGenerator() {
      yield 'hello';
      yield 'world';
      return 'ending';
    }
    
    var hw = helloWorldGenerator();
    
    hw.next()
    // { value: 'hello', done: false }
    
    第一次调用，Generator 函数开始执行，直到遇到第一个yield表达式为止。next方法返回一个对象，
    它的value属性就是当前yield表达式的值hello，done属性的值false，表示遍历还没有结束。
    
    hw.next()
    // { value: 'world', done: false }
    第二次调用，Generator 函数从上次yield表达式停下的地方，一直执行到下一个yield表达式。
    next方法返回的对象的value属性就是当前yield表达式的值world，done属性的值false，
    表示遍历还没有结束。
    
    hw.next()
    // { value: 'ending', done: true }
    
    hw.next()
    // { value: undefined, done: true }
    
    第三次调用，Generator 函数从上次yield表达式停下的地方，一直执行到return语句
    （如果没有return语句，就执行到函数结束）。next方法返回的对象的value属性，
    就是紧跟在return语句后面的表达式的值（如果没有return语句，则value属性的值为undefined），
    done属性的值true，表示遍历已经结束

`yield`表达式后面的表达式，只有当调用`next`方法、内部指针指向该语句时才会执行，

因此等于为 JavaScript 提供了手动的“惰性求值”（Lazy Evaluation）的语法功能。

`yield`表达式本身没有返回值，或者说总是返回`undefined`。`next`方法可以带一个参数，该参数就会被当作上

一个`yield`表达式的返回值。

Generator.prototype.return()

function* gen() {
      yield 1;
      yield 2;
      yield 3;
    }
    
    var g = gen();
    
    g.next()        // { value: 1, done: false }
    g.return('foo') // { value: "foo", done: true }
    g.next()        // { value: undefined, done: true }

`yield*`表达式，

function* bar() {
      yield 'x';
      yield* foo();
      yield 'y';
    }
    
    // 等同于
    function* bar() {
      yield 'x';
      yield 'a';
      yield 'b';
      yield 'y';
    }
    
    // 等同于
    function* bar() {
      yield 'x';
      for (let v of foo()) {
        yield v;
      }
      yield 'y';
    }
    
    for (let v of bar()){
      console.log(v);
    }
    // "x"
    // "a"
    // "b"
    // "y"

（1）异步操作的同步化表达

Ajax 是典型的异步操作，通过 Generator 函数部署 Ajax 操作，可以用同步的方式表达。
    function* main() {
      var result = yield request("http://some.url");
      var resp = JSON.parse(result);
        console.log(resp.value);
    }
    
    function request(url) {
      makeAjaxCall(url, function(response){
        it.next(response);
      });
    }
    
    var it = main();
    it.next();

（2）控制流管理

采用 Promise 改写上面的代码。
    
    Promise.resolve(step1)
      .then(step2)
      .then(step3)
      .then(step4)
      .then(function (value4) {
        // Do something with value4
      }, function (error) {
        // Handle any error from step1 through step4
      })
      .done();
    
    
    generator:
    
    function* longRunningTask(value1) {
      try {
        var value2 = yield step1(value1);
        var value3 = yield step2(value2);
        var value4 = yield step3(value3);
        var value5 = yield step4(value4);
        // Do something with value4
      } catch (e) {
        // Handle any error from step1 through step4
      }
    }
    
    scheduler(longRunningTask(initialValue));
    
    function scheduler(task) {
      var taskObj = task.next(task.value);
      // 如果Generator函数未结束，就继续调用
      if (!taskObj.done) {
        task.value = taskObj.value
        scheduler(task);
      }
    }

（3）部署 Iterator 接口

function* iterEntries(obj) {
      let keys = Object.keys(obj);
      for (let i=0; i < keys.length; i++) {
        let key = keys[i];
        yield [key, obj[key]];
      }
    }
    
    let myObj = { foo: 3, bar: 7 };
    
    for (let [key, value] of iterEntries(myObj)) {
      console.log(key, value);
    }
    
    // foo 3
    // bar 7