前端进阶: generator-1

介绍

Generator(生成器) 函数有多种理解角度。语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。

执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。

形式上，Generator 函数是一个普通函数，但是有两个特征。

function关键字与函数名之间有一个星号
函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。

function* hello() {
    yield 'hello';
    yield 'cpp';
    yield '专注';
}
var hG = hello()
console.log(hG, Object.prototype.toString.call(hG)); // hello {<suspended>}  "[object Generator]"
hG.next() // {value: "hello", done: false}

yield 表达式，暂停标记

由于 Generator 函数返回的遍历器对象，只有调用next方法才会遍历下一个内部状态
遍历器对象的next方法的运行逻辑如下。

遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。
下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式。
如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。
如果该函数没有return语句，则返回的对象的value属性值为undefined。

另外需要注意，yield表达式只能用在 Generator 函数里面，用在其他地方都会报错。

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

function* hello2() {
    console.log('hello'+ (yield))
    return '专注';
}
var hG = hello2()
hG.next(); // {value: undefined, done: false}
hG.next(); // helloundefined {value: "专注", done: true}
hG.next(); // {value: undefined, done: true}

return & yield区别

相似之处在于，都能返回紧跟在语句后面的那个表达式的值
不同:
a: return语句不具备位置记忆的功能,每次遇到yield函数暂停执行，并将紧跟yield后面的表达式的值作为返回对象的value属性值
b：一个函数只能执行一个return语句，而能执行多个yield语句

如何模拟 yield关键词？

与 Iterator 接口的关系

Iterator Generator
It/Gen erator 从命名上有点关系哈

任意一个对象的Symbol.iterator方法 === 该对象的遍历器生成函数Generator，调用该函数会生成该对象的遍历器对象.
Generator函数就是遍历器生成函数，因此能把Generator赋值给对象的Symbol.iterator属性，从而使该对象具有iterator接口

var myIterator = {}
myIterator[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
}
console.log([...myIterator]) //  [1, 2, 3]

Generator函数执行后返回一个遍历器对象，该对象本身也具有Symbol.iterator属性，所以执行后返回自身

function* gen() {}
var gg = gen()
gg[Symbol.iterator]() === gg // true
// 或者
var gg = (function* (){})()
gg[Symbol.iterator]() === gg

next 方法的参数

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

function* f() {
  for(var i = 0; true; i++) {
    var reset = yield i; // yield i 上一次的结果
    if(reset) { i = -1; }
  }
}
var g = f();

g.next() // { value: 0, done: false }
g.next() // { value: 1, done: false }
g.next(true) // { value: 0, done: false }

当next方法带一个参数true时，变量reset就被重置为这个参数（即true），因此i会等于-1，下一轮循环就会从-1开始递增。

注意，由于next方法的参数表示上一个yield表达式的返回值，所以在第一次使用next方法时，传递参数是无效的
再看一个通过next方法的参数，向 Generator 函数内部输入值的例子

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

let genObj = dataConsumer();
genObj.next(); // started {value: undefined, done: false}
genObj.next('a'); //  1. a {value: undefined, done: false}
genObj.next('b'); // 2. b  {value: "result", done: true}

for of 循环

for of 阔以自动遍历Generator函数生成的遍历器对象，不需要next方法

function* foo() {
    yield 1;
    yield 2;
    yield 3;
    return 'end'
}
for(var i of foo()) {
    console.log(i)
}
// 1
// 2
// 3

一旦next方法的返回对象的done属性为true，for…of循环就会中止，且不包含该返回对象，所以上面代码的return语句返回的end，不包括在for…of循环之中。

参考链接

Generator 函数的语法