详解 JS 中的生成器(Generator)

forwardXX
768 阅读9分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第8天，点击查看活动详情

详解 JS 中的生成器(Generator)

对迭代器(iterator)不熟悉的朋友，可以参考我的上一篇博客详解 JS 中的迭代器(iterator)。

Generator 函数是 ECMAScript 6 新增的一个极为灵活的结构，拥有在一个函数块内暂停和恢复代码执行的能力。

Generator 函数也是一种异步编程解决方案，语法行为与传统函数完全不同。

1.简介

1.1 基础概念

Generator 函数有以下三种理解角度：

  1. 语法上，可理解成 Generator 函数是一个状态机，封装了多个内部状态。
  2. Generator 函数是一个遍历器对象生成函数，执行 Generator 函数会返回一个遍历器对象，该对象可以依次遍历 Generator 函数内部的每一个状态。
  3. 形式上，Generator 函数是一个普通函数，但是有两个特征。
    • function 关键字与函数名之间有一个*，如:function* myGenerator() { ... }
    • 函数体内部可使用yield 表达式来定义不同的内部状态
//创建一个 Generator 函数
function* myGenerator() {
  //定义 三个状态 hello，world 和 return 语句（结束执行）
  yield "hello";
  yield "world";
  return "ending";
}

// 调用 Generator 函数，但该函数并不执行
// 返回一个指向内部状态的指针对象 - 遍历器对象（Iterator Object）
var myGen = myGenerator();

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

//第一次调用next方法：函数头部 => 第一个yield
//返回一个 IteratorResult 对象: value = hello(当前yield的状态值)  done = false(表示遍历还没结束)
myGen.next(); // { value: 'hello', done: false }
//第二次调用next方法：上次停下的地方 => 第二个yield
//返回一个 IteratorResult 对象: value = world(当前yield的状态值)  done = false(表示遍历还没结束)
myGen.next(); // { value: 'world', done: false }
//第三次调用next方法：上次停下的地方 => return语句
//返回一个 IteratorResult 对象: value = ending(return语句后的值)  done = true(表示遍历结束)
myGen.next(); // { value: 'ending', done: true }
//第四次调用，此时 Generator 函数已经运行完毕。
//next方法返回对象的value属性为undefined，done属性为true。以后再调用next方法，返回的都是这个值。
myGen.next(); // { value: undefined, done: true }

所以由上面代码可知：

  • Generator 函数是分段执行的，yield 表达式是暂停执行的标记，而 next 方法可以恢复执行。

  • 调用 Generator 函数返回的遍历器对象的 next 方法，使得指针移向下一个状态，即：内部指针从 函数头部或上一次停下来的地方 => 下一个 yield 表达式或 return 语句。

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

    1. 遇到 yield 表达式，就暂停执行后面的操作，并将紧跟在 yield 后面的那个表达式的值，作为返回的对象的 value 属性值。
    2. 下一次调用 next 方法时，再继续往下执行，直到遇到下一个 yield 表达式。
    3. 如果没有再遇到新的 yield 表达式，就一直运行直到遇到 return 语句为止，并将 return 语句后面的表达式的值，作为返回的对象的 value 属性值。
      • 注意点：yield 表达式(或 return 语句)后面的表达式，只有当调用 next 方法、内部指针指向该语句时才会执行，类似于“惰性求值”（Lazy Evaluation）的语法。
    4. 如果该函数没有 return 语句，则返回的对象的 value 属性值为 undefined。

  • next 方法会返回一个IteratorResult对象,该对象拥有以下两个属性：

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

1.2 yield 表达式

yield 表达式是 Generator 函数暂停执行标志。

yield 表达式只能用在 Generator 函数里面，用在其他地方使用都会报错SyntaxError: Unexpected number。

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
}

1.3 与 Iterator 接口的关系

任意一个对象的Symbol.iterator方法，等于该对象的遍历器生成函数，调用该函数会返回该对象的一个遍历器对象。

而 Generator 函数就是遍历器生成函数，因此可以把 Generator 函数 赋值给某个对象的Symbol.iterator属性，从而使其具有 Iterator 接口，并变成一个可迭代对象。

var myIterable = {}; //创建一个对象
//Generator 函数 赋值给对象的 Symbol.iterator属性，使myIterable变成一个可迭代对象
myIterable[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
};

//使用...扩展运算符遍历myIterable对象
//Generator 函数执行后，返回一个遍历器对象。
//该对象本身也具有Symbol.iterator属性，执行后返回自身。
console.log([...myIterable]); //[1, 2, 3]

//创建一个 Generator 函数gen
function* gen() {
  /* ... */
}
var g = gen(); //调用 gen函数 返回一个遍历器对象 g
// g 的Symbol.iterator属性，也是一个遍历器对象生成函数，执行后返回它自己。
console.log(g[Symbol.iterator]() === g); //true

2.next 方法的参数

yield 表达式本身没有返回值，或者说总是返回 undefined。

但 next 方法可以带一个参数，该参数就会被当作上一个 yield 表达式的返回值。

这个功能有很重要的语法意义，Generator 函数从暂停状态到恢复运行，它的上下文状态（context）是不变的。通过 next 方法的参数，就有办法在 Generator 函数开始运行之后，继续向函数体内部注入值。也就是说，可以在 Generator 函数运行的不同阶段，从外部向内部注入不同的值，从而影响函数内部的执行。

function* foo(x) {
  var y = 2 * (yield x + 1);
  var z = yield y / 3;
  return x + y + z;
}

//next方法不传值时
var a = foo(5);
console.log(a.next()); // Object{value:6, done:false}
console.log(a.next()); // Object{value:NaN, done:false}
console.log(a.next()); // Object{value:NaN, done:true}

//next方法传值时
var b = foo(5);
console.log(b.next()); // { value:6, done:false }
console.log(b.next(12)); // { value:8, done:false }
console.log(b.next(13)); // { value:42, done:true }

上面的代码传值过程如下图所示：

next与yield的传值.png

function* dataConsumer() {
  console.log("Started"); // Started
  console.log(`1. ${yield}`); // 1. a
  console.log(`2. ${yield}`); // 2. b
  return "result";
}
let genObj = dataConsumer();
console.log(genObj.next()); // { value: undefined, done: false }
console.log(genObj.next("a")); // { value: undefined, done: false }
console.log(genObj.next("b")); // { value: 'result', done: true }
//打印结果顺序如下
// Started
// { value: undefined, done: false }
// 1. a
// { value: undefined, done: false }
// 2. b
// { value: 'result', done: true }

上面的代码传值过程如下图所示： next参数与yield的传值过程2.png

注意点：

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

3. for...of 循环对 Generator 函数的影响

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

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

for (let v of foo()) {
  console.log(v); // 1 2 3
}

上面代码使用 for...of 循环，依次显示 3 个 yield 表达式的值，分别打印了 1，2，3。

但需注意 next 方法的返回对象的 done 属性为 true，for...of 循环就会立即中止，且不包含该返回对象，所以上面代码的 return 语句返回的 4，不会包括在 for...of 循环之中。

3.1 利用 Generator + for of 实现斐波那契数列

function* fibonacci() {
  let [prev, curr] = [0, 1];
  while (1) {
    yield curr;
    [prev, curr] = [curr, prev + curr];
  }
}

for (let n of fibonacci()) {
  if (n > 1000) break; //跳出fibonacci函数
  console.log(n);
}

3.2 利用 for of 来遍历普通对象的方法

由于原生的 JavaScript 普通 object 类型没有遍历接口，无法使用 for...of 循环，但通过 Generator 函数为它加上这个接口，就可以使用了。

  • 方法一：通过 Generator 函数为该对象加上遍历器接口
function* objectEntries(target) {
  //类似于 Object.keys(), 返回一个由target对象 自身的属性键组成的 数组。
  let propKeys = Reflect.ownKeys(target);

  for (let propKey of propKeys) {
    yield [propKey, target[propKey]];
  }
}

let obj = { name: "forwardXX", sex: "男", age: 18 };

for (let [key, value] of objectEntries(obj)) {
  console.log(`${key}: ${value}`);
}
// name: forwardXX
// sex: 男
// age: 18
  • 方法二：将 Generator 函数加到该对象的Symbol.iterator属性上
function* objectEntries() {
  //类似于 Object.keys()
  //它的返回值等同于 Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target))。
  //let propKeys = Reflect.ownKeys(this); //会报错 因为有symbol类型的属性
  let propKeys = Object.keys(this);
  for (let propKey of propKeys) {
    yield [propKey, this[propKey]];
  }
}

let obj = { name: "forwardXX", sex: "男", age: 18 };
obj[Symbol.iterator] = objectEntries;

for (let [key, value] of obj) {
  console.log(`${key}: ${value}`);
}
// name: forwardXX
// sex: 男
// age: 18

3.3 其他内部调用遍历器接口的原生语句

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

function* numbers() {
  yield 1;
  yield 2;
  return 3;
  yield 4;
}

// 扩展运算符
[...numbers()]; // [1, 2]

// Array.from 方法
Array.from(numbers()); // [1, 2]

// 解构赋值
let [x, y] = numbers();
x; // 1
y; // 2

// for...of 循环
for (let n of numbers()) {
  console.log(n); // 1 2
}

4.提前终止 Generator 函数

下面内容，我会尽快更新。

着急的朋友可以先自行去看阮一峰 - ES6 教程

4.1 Generator.prototype.throw()

4.2 Generator.prototype.return()

4.3 next()、throw()、return() 的共同点

5.yield* 表达式

6.作为对象属性的 Generator 函数

7.Generator 函数的 this

8.含义

8.1 Generator 与状态机

8.2 Generator 与协程

8.3 Generator 与上下文

9.应用

9.异步操作的同步化表达

（2）控制流管理 （3）部署 Iterator 接口 （4）作为数据结构

参考博客

结语

这是我目前所了解的知识面中最好的解答，当然也有可能存在一定的误区。

所以如果对本文存在疑惑，可以在评论区留言，我会及时回复的，欢迎大家指出文中的错误观点。

最后码字不易，觉得有帮助的朋友点赞、收藏、关注走一波。

avatar
文章
阅读
粉丝