&emsp;&emsp;根据ES6制订的标准自定义迭代器实现起来比较复杂，因此ES6又引入了生成器的概念，生成器（Generator）是一个能直接创建并返回迭代器的特殊函数，可将其赋给可迭代对象的Symbol.iterator属性。与普通函数不同，生成器不仅可以暂停函数内部的执行（即维护内部的状态），在声明时还需要包含一个星号（\*），并且拥有next()、return()和throw()三个迭代器方法。 ## 一、function\* &emsp;&emsp;生成器在声明时，需要把星号加到function关键字与函数名之间，但ES6没有规定星号两边是否需要空格，因此下面四种写法都是允许的，本篇将采用第一种写法。 ~~~ function* generator() {} function*generator() {} function *generator() {} function * generator() {} ~~~ &emsp;&emsp;生成器也能通过函数表达式创建，如下代码所示。注意，不能用箭头函数创建生成器。 ~~~ var iterator = function* () {}; ~~~ &emsp;&emsp;生成器虽然不能作为构造函数使用，但可以是对象的一个方法，并且还支持[第5篇](https://www.cnblogs.com/strick/p/10173583.html)提到的简洁方式的写法，如下所示。 ~~~ var obj = { *generator() {} }; ~~~ ## 二、yield &emsp;&emsp;生成器之所以能在其内部实现分批执行，还要多亏ES6新增的yield关键字。这个关键字可标记暂停位置，具体使用可参考下面的代码。 ~~~ function* generator() { var count = 0; while (count < 2) yield count++; return count; } var iterator = generator(); ~~~ &emsp;&emsp;虽然生成器的调用方式和普通函数相同，但它不会马上返回函数的结果（即不能立刻执行）。而是先返回一个它所生成的迭代器，然后再调用其next()方法恢复内部语句的执行（如下代码所示），直至遇到yield关键字，再次暂停，如此反复，一直持续到函数的末尾或碰到return语句才终止这套循环操作。 ~~~ iterator.next(); //{value: 0, done: false} iterator.next(); //{value: 1, done: false} iterator.next(); //{value: 2, done: true} ~~~ **1）yield表达式** &emsp;&emsp;yield关键字的后面可以跟一个表达式，例如代码中的count++。生成器的next()方法能够返回一个IteratorResult对象，其done属性用于判断生成器是否执行完毕，即是否还有yield表达式。关于IteratorResult两个属性的值，需要分情况说明，具体如下所列。 &emsp;&emsp;（1）当生成器还在执行时，value的值可通过计算yield表达式得到，done的值为false。 &emsp;&emsp;（2）当生成器执行完毕时，value的值是undefined，done的值为true。 &emsp;&emsp;（3）当遇到return语句时，value的值就是return后面跟的值，done的值为true。 &emsp;&emsp;要想遍历生成器，除了借助next()方法之外，还可以使用for-of循环。但要注意，遍历到的是yield表达式的计算结果，如下所示。 ~~~ /******************** 0 1 ********************/ for(var step of iterator) { console.log(step); } ~~~ **2）优先级和结合性** &emsp;&emsp;因为yield可以单独使用（例如x=yield），所以它并不是一个运算符。虽然如此，但它还是包含优先级和结合性的概念。yield的优先级很低，仅比扩展运算符和逗号高，如果要提前计算，可以像下面这样用一对圆括号包裹。 ~~~ 1 + (yield 2); ~~~ &emsp;&emsp;yield的结合性与等号一样，也是从右往左，例如yield yield 1相当于yield(yield 1)。另外，yield有一个很重要的限制，就是它只能存在于生成器内，在其它位置出现都会有异常，包括生成器中的子函数内，如下所示。 ~~~ function* error() { function inner() { yield 1; } } ~~~ ## 三、3个方法 **1）next()** &emsp;&emsp;本节开篇的时候曾提到过生成器包含三个迭代器方法，接下来将围绕这三个方法展开讲解。首先介绍的是next()方法，它能接收一个参数，而这个参数会成为上一个yield表达式的返回值。以下面的代码为例，calculate()函数包含两个yield表达式，在创建生成器后，调用了两次next()方法，第一次没有传参，第二次传入的数字10被赋给了x变量。 ~~~ function* calculate() { let x = yield 1; let y = yield x + 2; return y; } var iterator = calculate(); iterator.next(); //{value: 1, done: false} iterator.next(10); //{value: 12, done: false} ~~~ &emsp;&emsp;注意，第一次调用next()方法时，即使传进了参数，这个参数也会被忽略，因为此时还不存在上一个yield表达式。 **2）return()** &emsp;&emsp;接下来介绍的是return()方法，它能提前终止当前生成器，类似于在函数体内马上执行return语句。下面沿用上一个示例，将函数名改成stop，第二次调用的方法改成return()。 ~~~ function* stop() { let x = yield 1; let y = yield x + 2; return y; } var iterator = stop(); iterator.next(); //{value: 1, done: false} iterator.return(10); //{value: 10, done: true} iterator.next(); //{value: undefined, done: true} ~~~ &emsp;&emsp;return()方法也能接收一个参数，而从上面的调用结果中可以得知，这个参数相当于return运算符后面跟的值，如下所示。 ~~~ function* stop() { let x = yield 1; return 10; } ~~~ **3）throw()** &emsp;&emsp;最后介绍的是throw()方法，它能强制生成器抛出一个错误。此方法也有一个参数，但这个参数只能被try-catch语句中的catch部分接收。下面用一个例子演示throw()方法的具体使用。 ~~~ function* especial() { var count = 1; try { yield count; } catch (e) { count = 2; console.log(e); //"inner" } yield count + 3; } var iterator = especial(); iterator.next(); 　　//{value: 1, done: false} try { iterator.throw("inner"); //{value: 5, done: false} iterator.next(); //{value: undefined, done: true} iterator.throw("outer"); } catch (e) { console.log(e); //"outer" } ~~~ &emsp;&emsp;在especial生成器的内部和外部各有一条try-catch语句。第一次调用throw()方法，在生成器内部先捕获抛出的错误，再把传入的字符串“inner”赋给catch的e参数，接着执行yield count + 3，最后返回一个计算过的IteratorResult对象。第二次调用throw()方法，由于生成器已执行完毕，因此只能在外部将错误捕获。 ## 四、yield\* &emsp;&emsp;在yield关键字后面跟一个星号（两边的空格可选），就能将执行权委托给另一个生成器或可迭代对象。以下面代码为例，在delegation生成器中，有两个yield\*表达式，第一个跟的是数组，第二个跟的是generator生成器（相当于将两个生成器合并）。 ~~~ function* generator() { var count = 0; while (count < 2) yield count++; return count; } function* delegation() { yield* ["a", "b"]; var result = yield* generator(); console.log(result); //2 } var iterator = delegation(); iterator.next(); //{value: "a", done: false} iterator.next(); //{value: "b", done: false} iterator.next(); //{value: 0, done: false} iterator.next(); //{value: 1, done: false} iterator.next(); //{value: undefined, done: true} ~~~ &emsp;&emsp;从上面的遍历结果中可知，delegation生成器先访问数组的每个元素，再计算generator生成器中的yield表达式，并将其返回值赋给了result变量。 ## 五、异步编程 &emsp;&emsp;在ES6之前，要实现异步编程，最常用的方法是用回调函数，例如捕获Ajax通信中的响应内容，如下所示。 ~~~ function fetch(callback) { $.getJSON("server.php", {}, function(json) { callback.call(this, json); }); } function asyn() { fetch(function(json) { console.log(json); //{code: 200, msg: "操作成功"} }); } asyn(); ~~~ &emsp;&emsp;fetch()函数调用了jQuery中能发起Ajax请求的getJSON()方法，在其载入成功时的回调函数内间接调用了callback参数（即传递进来的回调函数），其参数就是响应内容。 &emsp;&emsp;接下来将asyn()变为生成器，并在其内部添加yield表达式，然后在getJSON()的回调函数中调用生成器的next()方法，并将响应内容作为参数传入。 ~~~ function fetch() { $.getJSON("server.php", {}, function(json) { gen.next(json); }); } function* asyn() { var result = yield fetch(); console.log(result); //{code: 200, msg: "操作成功"} } var gen = asyn(); gen.next(); ~~~ &emsp;&emsp;通过上面的代码可知，生成器能用同步的方式实现异步编程，从而有效避免了层层嵌套的回调金字塔。 ***** > 原文出处： [博客园-ES6躬行记](https://www.cnblogs.com/strick/category/1372951.html) [知乎专栏-ES6躬行记](https://zhuanlan.zhihu.com/pwes6) 已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎浏览。  推荐一款前端监控脚本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不仅能监控前端的错误、通信、打印等行为，还能计算各类性能参数，包括 FMP、LCP、FP 等。