| 引言：从Generator开始，才算是ES6相对高级的部分。之后的Promise、async都与异步编程有关。 |
一、Generator函数简介
先用最直白的话给大家介绍一下Generator函数：首先呢，Generator是一类函数，通过 * 号来定义。其次，Generator函数里特有的yield关键字，可以把函数里面的语句在执行时分步执行。用next()来执行。
例如，定义一函数：
function* test(){ yield console.log(“1”); yield console.log(“2”); yield console.log(“3”); } var t=test();t.next();t.next();t.next();
在执行第一个next的时候，输出1，第二个输出2，以此类推……这样，就把函数里面的内容分段执行了。
下面请看详细介绍。
基本概念
Generator函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。
对于Generator函数有多种理解角度。从语法上，首先可以把它理解成一个状态自动机，封装了多个内部状态。
执行Generator函数会返回一个遍历器对象。也就是说，Generator函数除了是状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历Generator函数内部的每一个状态。
形式上，Generator 函数是一一个普通函数，但是有两个特征:一是function命令与函数名之间有一个星号；二是函数体内使用yield语句定义不同的内部状态。
/******** 代码块1-1 ********/ function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending'; } var hw = helloWorldGenerator();
代码块1-1定义了一个Generator函数helloWorldGenerator, 它内部有两个yield语句"hello"和“world"，即该函数有3个状态: hello、 world 和return语句(结束执行)。
Generator函数的调用方法与普通函数一样，也是在函数名后面加上一对圆括号。不同的是，调用Generator函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象。
下一步，必须调用遍历器对象的next方法，使得指针移向下一个状态。也就是说，每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一条yield语句(或return语句)为止。换言之，Generator 函数是分段执行的，yield语句是暂停执行的标记，而next方法可以恢复执行。
/******** 代码块1-2 ********/ hw.next() // { value: 'hello', done: false } hw.next() // { value: 'world', done: false } hw.next() // { value: 'ending', done: true } hw.next() // { value: undefined, done: true }
上面的代码块1-2共调用了4次next方法。运行解释如下：
第1次调用，Generator 函数开始执行，直到遇到第一条yield语句为止。next方法返回一个对象，它的value属性就是当前yield语句的值hello，done属性的值false表示遍历还没有结束。
第2次调用，Generator 函数从上次yield语句停下的地方，一直执行到下一条yield语句。
第3次调用，Generator 函数从上次yield语句停下的地方，一直执行到return语句(如果没有return语句，就执行到函数结束)。next方法返回的对象的value属性就是紧跟在return语句后面的表达式的值(如果没有return语句，则value属性的值为undefined)，done属性的值true表示遍历已经结束。
第4次调用，此时Generator函数已经运行完毕，next方法返回的对象的value属性为undefined, done属性为true。以后再调用next方法，返回的都是这个值。
总结：调用Generator函数，返回一个遍历器对象，代表Generator函数的内部指针。以后，每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield语句后面那个表达式的值; done 属性是一个布尔值，表示是否遍历结束。
函数写法
ES6没有规定functon关键字与函数名之间的星号写在哪个位置。这导致下面代码块1-3的写法都能通过。
/******** 代码块1-3 ********/ function * foo(x, y) { ... } function *foo(x, y) { ... } function* foo(x, y) { ... } function*foo(x, y) { ... }
yield关键字介绍
由于Generator函数返回的遍历器对象只有调用next方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。yield语句就是暂停标志。
遍历器对象的next方法的运行逻辑如下。
1、遇到yield语句就暂停执行后面的操作。并将紧跟在yield后的表达式的值作为返回的对象的value属性值。
2、下一次调用next方法时再继续往下执行，直到遇到下条yield语句。
3、如果没有再遇到新的yield语句，就一直运行到函数结束，直到returnr语句为止，并将return语句后面的表达式的值作为返回的对象的value属性值。
4、如果该函数没有return语句，则返回的对象的value属性值为undefined。
另外注意，yield语句不能用在普通函数中，否则会报错。
二、next方法的参数
yield语句本身没有返回值，或者说总是返回undefined。next方法可以带一个参数， 该参数会被当作上一条yield语句的返回值。
/******** 代码块2-1 ********/ function* foo(x) { var y=2 * (yield (x + 1)); var z=yield(y/3); return(x+y+z); } var a = foo(5); a.next() // Object{value:6, done:false} a.next() // object{value:NaN, done:false} a.next() // object{value:NaN, done:false} var b = foo(5); b.next() // {value:6，done:false } b.next(12) // {value:8, done:false } b.next(13) // {value:42, done:true }
代码块2-1中，第二次运行next方法的时候不带参数，导致y的值等于2 * undefined(即NaN)，除以3以后还是NaN, 因此返回对象的value属性也等于NaN。 第三次运行Next方法的时候不带参数，所以z等于undefined,返回对象的value属性等于5+NaN +undefined,即NaN。
如果向next方法提供参数，返回结果就完全不一样了。上面的代码第一次调用b的next方法时，返回x+1的值6;第二次调用next方法，将上一次yield语句的值设为12,因此y等于24,返回y / 3的值8;第三次调用next方法，将上一次yield语句的值设为13，因此z等于13, 这时x等于5，y等于24,所以return语句的值等于42。
三、for…of循环
for…of循环可以自动遍历Generator函数，且此时不再需要调用next方法。如代码块3-1。
/******** 代码块3-1 ********/ function *foo() { yield 1; yield 2; yield 3; yield 4; yield 5; return 6; } for (let v of foo()) { console.log(v); } //1 2 3 4 5
上面的代码使用for...of循环依次显示5条yield语句的值。这里需要注意，一旦next方法的返回对象的done属性为true，for...of循环就会终止，且不包含该返回对象，所以上面的return语句返回的6不包括在for...of循环中。
四、关于普通throw()与Generator的throw()
Generator函数返回的遍历器对象都有一个throw方法，可以在函数体外抛出错误，然后在Generator函数体内捕获。
我们知道在try...catch语句中，如果try语句中抛出了两个异常，当第一个异常抛出时，就会直接停止。
/******** 代码块4-1 ********/ var g = function* () { while (true) { try { yield; } catch (e) { if (e != 'a') throw e; console.log('内部捕获', e); } } }; var i = g(); i.next(); try { i.throw('a'); i.throw('b'); } catch (e) { console.log('外部捕获',e); } //内部捕获a //外部捕获b
但是，上面的代码块4-1中，遍历器对象i连续抛出两个错误。第一个错误被Generator函数体内的catch语句捕获，然后Generator函数执行完成，于是第二个错误被函数体外的catch语句捕获。
注意，不要混淆遍历器对象的throw方法和全局的throw命令。上面的错误是用遍历器对象的throw方法抛出的，而不是用throw命令抛出的。后者只能被函数体外的catch语句捕获。
五、Generator函数的应用【很重要】
1、延迟函数
功能：对函数f()延迟2000ms后执行。见代码块5-1。
/******** 代码块5-1 ********/ function * f(){ console.log('执行了'); } var g = f(); setTimeout(function () { g.next(); },2000);
2、简化函数的flag（Generator与状态机）
功能：把一些需要flag的函数，去掉flag，大大简化函数体。见代码块5-2与5-3。
/******** 代码块5-2 原函数 ********/ var tickFlag = true; var clock = function (){ if(tickFlag) console.log('Tick'); else console.log('Tock'); tickFlag=!tickFlag; }
/******** 代码块5-3 简化后函数 ********/ var clock = function* (){ while(true){ yield console.log('Tick'); yield console.log('Tock'); } }
3、异步操作的同步化表达
功能：假如现在有两个api分别是加载页面和卸载页面。普通写法见代码块5-4，同步化表达见代码块与5-5。
/******** 代码块5-4 原写法 ********/ //加载页面 showLoadingScreen(); //加载页面数据 loadUIDataAsynchronously(); //卸载页面 hideLoadingScreen();
/******** 代码块5-5 同步化后写法 ********/ function* loadUI(){ showLoadingScreen(); yield loadUIDataAsynchronously(); hideLoadingScreen(); } var load = loadUI(); //加载UI load.next(); //卸载UI load.next();
其实，类似代码块5-5的写法，Vue里面有个概念Bus（中央总线），还有Java里面的线程的总线，都极为相似。感兴趣可以去查一查。
4、函数的自动化控制【心生佩服】
功能：如果有一个多步操作非常耗时，采用回调函数可能会很复杂。这时利用Generator函数可以改善代码运行的流程，类似于自动化控制。见代码块5-6。
/******** 代码块5-6 函数的自动化控制 ********/ function* longRunningTask() { try { var value1 = yield step1(); var value2 = yield step2(value1); var value3 = yield step3(value2); var value4 = yield step4(value3); } catch (e) { // catch Error } } scheduler(longRunningTask());//实现自动化控制 function scheduler(task){ setTimeout(function() { var taskObj = task.next(task.value); if(!taskObj.done){ task.value = taskObj.value; } },0); }
查看更多ES6教学文章：
参考文献
阮一峰 《ES6标准入门（第2版）》
