Generator生成器函数

什么是生成器？

生成器第一次出现在CLU语言中。CLU语言是美国麻省理工大学的Barbara Liskov教授和她的学生们在1974年至1975年间所设计和开发出来的。Python、C#和Ruby等语言都受到其影响，实现了生成器的特性，生成器在CLU和C#语言中被称为迭代器（iterator），Ruby语言中称为枚举器（Enumerator）。

生成器的主要功能是：
通过一段程序，持续迭代或枚举出符合某个公式或算法的有序数列中的元素。这个程序便是用于实现这个公式或算法的，而不需要将目标数列完整写出。

在ES6定义的生成器函数有别于普通的函数，生成器可以在执行当中暂停自身，可以立即恢复执行也可以过一段时间之后恢复执行。最大的区别就是它并不像普通函数那样保证运行到完毕。还有一点就是，在执行当中每次暂停或恢复循环都提供了一个双向信息传递的机会，生成器可以返回一个值，恢复它的控制代码也可发回一个值。

生成器的基本语法

与普通函数语法的差别，在function关键字和函数名直接有个号，这个作为生成器函数的主要标识符，如下所示：

function *it(){}

*号的位置没有严格规定，只要在中间就行，你可以这么写：function *it(){ }

function* it(){ }
function * it(){ }
function*it(){ }

笔者觉得*靠近函数名——function *it(){ }，看着更为清晰，选择哪种书写方式完全凭个人喜好。

调用生成器也十分简单，就和调用普通函数一样，比如：it();复制代码同时也可以向生成器函数传递参数：

function *it(x,y){ 

}

it(5,10);

yield关键字

生成器函数中，有一个特殊的新关键字：yield——用来标注暂停点，如下段代码所示：

function *generator_function(){ 
  yield 1; 
  yield 2; 
  yield 3;
}

如何运行生成器呢？如下段代码所示：

let generator = generator_function();
console.log(generator.next().value);//1
console.log(generator.next().value);//2
console.log(generator.next().value);//3
console.log(generator.next().done);//true

generator = generator_function();
let iterable = generator[Symbol.iterator]();
console.log(iterable.next().value);//1
console.log(iterable.next().value);//2
console.log(iterable.next().value);//3
console.log(iterable.next().done);//true

从上述代码我们可以看出：我们可以在实例化的生成器generator的对象里直接调用next()方法，同时我们也可以调用生成器原型链的Symbol.iterator属性方法调用next()，效果是一致的。我们每调用一次next()方法，就是顺序在对应的yield关键字的位置暂停，遵守迭代器协议，返回例如这样形式的对象： {value:”1″,done:false}，直到所有的yield的值消费完为止，再一次调用next()方法生成器函数会返回 {value:undefined,done:true},说明生成器的所有值已消费完。由此可见done属性用来标识生成器序列是否消费完了。当done属性为true时，我们就应该停止调用生成器实例的next方法。还有一点需要说明带有yield的生成器都是以惰性求值的顺序执行，当我们需要时，对应的值才会被计算出来。

生成器函数的类型检测

如何检测一个函数是生成器函数和生成器实例的原型呢，我们可以使用constructor.prototype属性检测，实例代码如下：

function *genFn() {}
const gen=genFn();
console.log(genFn.constructor.prototype);//GeneratorFunction {}
console.log(gen.constructor.prototype);//Object [Generator] {}
console.log(gen instanceof genFn)//true
//判断某个对象是否为指定生成函数所对应的实例

除了以上方法进行判断，我们还可以使用@@tostringTag属性，如下段代码所示：

function *genFn() {}
const gen=genFn();
console.log(genFn[Symbol.toStringTag]);//GeneratorFunction
console.log(gen[Symbol.toStringTag]);//Generator

yield*委托

yield* 可以将可迭代的对象iterable放在一个生成器里，生成器函数运行到yield * 位置时，将控制权委托给这个迭代器，直到耗尽为止，如下段代码所示：

function *generator_function_1(){ 
 yield 2; 
 yield 3;
}
function *generator_function_2(){
 yield 1; 
 yield* generator_function_1(); 
 yield* [4, 5];
}
const generator = generator_function_2();
console.log(generator.next().value); //1
console.log(generator.next().value); //2
console.log(generator.next().value); //3
console.log(generator.next().value); //4
console.log(generator.next().value); //5
console.log(generator.next().done);  //true

从上述代码中，我们在一个生成器中嵌套了一个生成器和一个数组，当程序运行至生成器generator_function_1()时，将其中的值消费完跳出后，再去迭代消费数组，消费完后，done的属性值返回true。

return(value)方法

你可以在生成器里使用return(value)方法，随时终止生成器，如下段代码所示：

function *generator_function(){ 
 yield 1; 
 yield 2; 
 yield 3;
}
const generator = generator_function();
console.log(generator.next().value); //1
console.log(generator.return(22).value); //22
console.log(generator.next().done);//true

从上述代码我们看出，使用return()方法我们提前终止了生成器，返回return里的值，再次调用next()方法时，done属性的值为true,由此可见return提前终止了生成器，其他的值也不再返回。

throw(exception)方法

除了用return(value)方法可以终止生成生成器，我们还可以调用 throw(exception) 进行提前终止生成器，示例代码如下：

function *generator_function(){ 
    yield 1;
    yield 2;
    yield 3;    
}
const generator = generator_function();
console.log(generator.next());
try{
    generator.throw("wow");
}
catch(err){
    console.log(err);
}
finally{
    console.log("clean")
}
console.log(generator.next());

上段代码输出：

{ value: 1, done: false }
wow
clean
{ value: undefined, done: true }

由此可以看出，在生成器外部调用try…catch…finally,throw()异常被try…catch捕捉并返回，并执行了finally代码块中的代码，再次调用next方法，done属性返回true,说明生成器已被终止，提前消费完毕。我们不仅可以在next执行过程中插入throw()语句，我们还可以在生成器内部插入try…catch进行错误处理，代码如下所示：

function *generator_function(){ 
try { 
 yield 1; 
} catch(e) { 
 console.log("1st Exception"); 
} 
try { 
 yield 2; 
} catch(e) { 
 console.log("2nd Exception"); 
}
}
const generator = generator_function();
console.log(generator.next().value);
console.log(generator.throw("exception string").value);
console.log(generator.throw("exception string").done);

运行上段代码将会输出：

1
1st Exception
2
2nd Exception
true

从代码输出可以输出，当我们在generator.throw()方法时，被生成器内部上个暂停点的异常处理代码所捕获，同时可以继续返回下个暂停点的值。由此可见在生成器内部使用try…catch可以捕获异常，并不影响值的下次消费，遇到异常不会终止。

向生成器传递数据

生成器不但能对外输出数据，同时我们也可以向生成器内部传递数据，是不是很神奇呢，还是从一段代码开始说起：

function *generator_function(){ 
    const a = yield 12;
    const b = yield a + 1;
    const c = yield b + 2; 
    yield c + 3; // Final Line
}
const generator = generator_function();
console.log(generator.next().value);
console.log(generator.next(5).value);
console.log(generator.next(11).value);
console.log(generator.next(78).value);
console.log(generator.next().done);

运行上述代码将会输出：

12
6
13
81
true

从上述代码我们可以看出：

第一次调用generator.next()，调用yield 12，并返回值12，相当启动生成器。并在 yield 12 处暂停。

第二次调用我们向其进行传值generator.next(5)，前一个yield 12这行暂停点获取传值，并将5赋值给a, 忽略12这个值，然后运行至 yield (a + 1) 这个暂停点，因此是6，并返回给value属性。并在 yield a + 1 这行暂停。

第三次调用next，同理在第二处暂停进行恢复复，把11的值赋值给b，忽略a+1运算，因此在yield b + 2中，返回13，并在此行暂停。第四次调用next，函数运行到最后一行，C变量被赋值78，最后一行为加法运算，因此value属性返回81。再次运行next()方法，done属性返回true,生成器数值消费完毕。

从上述步骤说明中，向生成器传递数据，首行的next方法是启动生成器，即使向其传值，也不能进行变量赋值，你可以拿上述例子进行实验，无论你传递什么都是徒劳的，因为传递数据只能向上个暂停点进行传递，首个暂停点不存在上个暂停点。

链接：https://juejin.im/post/6844903877221810183
来源：掘金