Generator生成器知识点总结-JavaScript

168 阅读3分钟

1. Generator的概念

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

执行 Generator 函数会返回一个遍历器对象,可以依次遍历 Generator 函数内部的每一个状态

形式上的特征:

function关键字和函数名之间有一个*,星号的位置不固定,一般紧跟function

函数体内部使用yield(产出)表达式,定义不同的状态

Genarator函数定义和调用

调用 Generator 函数,返回一个遍历器对象,代表 Generator 函数的内部指针。以后,每次调用遍历器对象的next方法,就会返回一个有着valuedone两个属性的对象。value属性表示当前的内部状态的值,是yield表达式后面那个表达式的值;done属性是一个布尔值,表示是否遍历结束

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();

hw.next()
// { value: 'hello', done: false }

hw.next()
// { value: 'world', done: false }

hw.next()
// { value: 'ending', done: true }

hw.next()
// { value: undefined, done: true }

2. yield 表达式和yield* 表达式

yield表达式就是暂停标志

遍历器next方法的运行逻辑

遍历器对象的next方法遇到yield表达式,就暂停执行后面的操作,并将紧跟在yield后面的那个表达式的值,作为返回的对象的value属性值,下一次调用next方法时,再继续往下执行,直到遇到下一个yield表达式或者遇到return语句为止(函数为止),return语句跟着的表达式是返回对象的value属性值

yield表达式使用注意点:

yield表达式只能用在 Generator 函数里面,用在其他地方都会报错

(function (){
  yield 1;
})()
// SyntaxError: Unexpected number

yield表达式如果用在另一个表达式之中,必须放在圆括号里面

console.log('Hello' + (yield 123)); // OK

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

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

yield*表达式

ES6 提供了yield*表达式,用来在一个 Generator 函数里面执行另一个 Generator 函数。任何数据结构只要有 Iterator 接口,就可以被yield*遍历

function* foo() {
  yield 'a';
  yield 'b';
}
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"

3. Generator 函数与 Iterator 接口的关系

Generator 函数是Iterator 接口的遍历器生成函数,调用Generator 函数会生成一个遍历器对象

把 Generator 赋值给对象的Symbol.iterator属性,从而使得该对象具有 Iterator 接口

var myIterable = {};
myIterable[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
};

[...myIterable] // [1, 2, 3]

对象的Symbol.iterator属性等于调用Generator函数的返回

function* gen(){
  // some code
}

var g = gen();

g[Symbol.iterator]() === g
// true

上面代码中,gen是一个 Generator 函数,调用它会生成一个遍历器对象g。它的Symbol.iterator属性,也是一个遍历器对象生成函数,执行后返回它自己

4. next方法的参数

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

通过next方法的参数,向 Generator 函数内部输入值的例子。

function* dataConsumer() {
  console.log('Started');
  console.log(`1. ${yield}`);
  console.log(`2. ${yield}`);
  console.log(`3. ${yield 3}`);
  return 'result';
}

let genObj = dataConsumer();
genObj.next();
// Started
genObj.next('a')
// 1. a
genObj.next('b')
// 2. b

5. Iterator 对象作为参数

for...of循环、扩展运算符(...)、解构赋值和Array.from方法内部调用的,都是遍历器接口。它们都可以将 Generator 函数返回的 Iterator 对象,作为参数

next方法的返回对象的done属性为truefor...of循环就会中止,且不包含该返回对象,所以下方只会输出1,2

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

6. 使用Generator 函数遍历对象的方法

1.通过 Generator 函数为对象增加遍历器

function* objectEntries(obj) {
  let propKeys = Reflect.ownKeys(obj);

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

let jane = { first: 'Jane', last: 'Doe' };

for (let [key, value] of objectEntries(jane)) {
  console.log(`${key}: ${value}`);
}
// first: Jane
// last: Doe

2.将 Generator 函数加到对象的Symbol.iterator属性上面

function* objectEntries() {
  let propKeys = Object.keys(this);

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

let jane = { first: 'Jane', last: 'Doe' };

jane[Symbol.iterator] = objectEntries;

for (let [key, value] of jane) {
  console.log(`${key}: ${value}`);
}
// first: Jane
// last: Doe