ES6躬行记（19）——生成器

　　根据ES6制订的标准自定义迭代器实现起来比较复杂，所以ES6又引入了生成器的概念，生成器（Generator）是一个能直接建立并返回迭代器的特殊函数，可将其赋给可迭代对象的Symbol.iterator属性。与普通函数不一样，生成器不只能够暂停函数内部的执行（即维护内部的状态），在声明时还须要包含一个星号（*），而且拥有next()、return()和throw()三个迭代器方法。

1、function*

　　生成器在声明时，须要把星号加到function关键字与函数名之间，但ES6没有规定星号两边是否须要空格，所以下面四种写法都是容许的，本篇将采用第一种写法。

function* generator() {}
function*generator() {}
function *generator() {}
function * generator() {}

　　生成器也能经过函数表达式建立，以下代码所示。注意，不能用箭头函数建立生成器。

var iterator = function* () {};

　　生成器虽然不能做为构造函数使用，但能够是对象的一个方法，而且还支持第5篇提到的简洁方式的写法，以下所示。

var obj = {
  *generator() {}
};

2、yield

　　生成器之因此能在其内部实现分批执行，还要多亏ES6新增的yield关键字。这个关键字可标记暂停位置，具体使用可参考下面的代码。

function* generator() {
  var count = 0;
  while (count < 2)
    yield count++;
  return count;
}
var iterator = generator();

　　虽然生成器的调用方式和普通函数相同，但它不会立刻返回函数的结果（即不能马上执行）。而是先返回一个它所生成的迭代器，而后再调用其next()方法恢复内部语句的执行（以下代码所示），直至遇到yield关键字，再次暂停，如此反复，一直持续到函数的末尾或碰到return语句才终止这套循环操做。

iterator.next();        //{value: 0, done: false}
iterator.next();        //{value: 1, done: false}
iterator.next();        //{value: 2, done: true}

1）yield表达式

　　yield关键字的后面能够跟一个表达式，例如代码中的count++。生成器的next()方法可以返回一个IteratorResult对象，其done属性用于判断生成器是否执行完毕，便是否还有yield表达式。关于IteratorResult两个属性的值，须要分状况说明，具体以下所列。

（1）当生成器还在执行时，value的值可经过计算yield表达式获得，done的值为false。

（2）当生成器执行完毕时，value的值是undefined，done的值为true。

（3）当遇到return语句时，value的值就是return后面跟的值，done的值为true。

　　要想遍历生成器，除了借助next()方法以外，还可使用for-of循环。但要注意，遍历到的是yield表达式的计算结果，以下所示。

/********************
  0
  1
********************/
for(var step of iterator) {
  console.log(step);
}

2）优先级和结合性

　　由于yield能够单独使用（例如x=yield），因此它并非一个运算符。虽然如此，但它仍是包含优先级和结合性的概念。yield的优先级很低，仅比扩展运算符和逗号高，若是要提早计算，能够像下面这样用一对圆括号包裹。

1 + (yield 2);

　　yield的结合性与等号同样，也是从右往左，例如yield yield 1至关于yield(yield 1)。另外，yield有一个很重要的限制，就是它只能存在于生成器内，在其它位置出现都会有异常，包括生成器中的子函数内，以下所示。

function* error() {
  function inner() {
    yield 1;
  }
}

3、3个方法

1）next()

　　本节开篇的时候曾提到过生成器包含三个迭代器方法，接下来将围绕这三个方法展开讲解。首先介绍的是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}

　　注意，第一次调用next()方法时，即便传进了参数，这个参数也会被忽略，由于此时还不存在上一个yield表达式。

2）return()

　　接下来介绍的是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}

　　return()方法也能接收一个参数，而从上面的调用结果中能够得知，这个参数至关于return运算符后面跟的值，以下所示。

function* stop() {
  let x = yield 1;
  return 10;
}

3）throw()

　　最后介绍的是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"
}

　　在especial生成器的内部和外部各有一条try-catch语句。第一次调用throw()方法，在生成器内部先捕获抛出的错误，再把传入的字符串“inner”赋给catch的e参数，接着执行yield count + 3，最后返回一个计算过的IteratorResult对象。第二次调用throw()方法，因为生成器已执行完毕，所以只能在外部将错误捕获。

4、yield*

　　在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}

　　从上面的遍历结果中可知，delegation生成器先访问数组的每一个元素，再计算generator生成器中的yield表达式，并将其返回值赋给了result变量。

5、异步编程

　　在ES6以前，要实现异步编程，最经常使用的方法是用回调函数，例如捕获Ajax通讯中的响应内容，以下所示。

function fetch(callback) {
  $.getJSON("server.php", {}, function(json) {
    callback.call(this, json);
  });
}
function asyn() {
  fetch1(function(json) {
    console.log(json);        //{code: 200, msg: "操做成功"}
  });
}
asyn();

　　fetch()函数调用了jQuery中能发起Ajax请求的getJSON()方法，在其载入成功时的回调函数内间接调用了callback参数（即传递进来的回调函数），其参数就是响应内容。

　　接下来将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();

　　经过上面的代码可知，生成器能用同步的方式实现异步编程，从而有效避免了层层嵌套的回调金字塔。