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
来源：掘金

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,732评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,496评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,264评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,807评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,806评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,675评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,029评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,683评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 41,704评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1赞 332
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,413评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,016评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2赞 343