ES6 - Generator 函数

简介

函数的定义：

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();

函数执行的结果是返回一个 Iterator

hw.next()
// { value: 'hello', done: false }

hw.next()
// { value: 'world', done: false }

hw.next()
// { value: 'ending', done: true }

hw.next()
// { value: undefined, done: true }

因为 Generator 函数生成 Iterator 对象，所以可以使用 Generator 函数部署 Iterator 接口

var myIterable = {};
myIterable[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
};

[...myIterable] // [1, 2, 3]

next 方法的参数

该参数就会被当作上一个 yield 表达式的返回值

function* f() {
  for(var i = 0; true; i++) {
    var reset = yield i;
    if(reset) { i = -1; }
  }
}

var g = f();

g.next() // { value: 0, done: false }
g.next() // { value: 1, done: false }
g.next(true) // { value: 0, done: false }

Generator.prototype.return()

可以返回给定的值，并且终结遍历 Generator 函数

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

var g = gen();

g.next()        // { value: 1, done: false }
g.return('foo') // { value: "foo", done: true }
g.next()        // { value: undefined, done: true }

yield* 表达式

function* foo() {
  yield 'a';
  yield 'b';
}

function* bar() {
  yield 'x';
  yield* foo();
  yield 'y';
}

// 等同于
function* bar() {
  yield 'x';
  yield 'a';
  yield 'b';
  yield 'y';
}

yield* iterator
// 等同于
for (let v of iterator) {
  yield v;
}

应用

异步操作的同步化表达：

function* main() {
  var result = yield request("http://some.url");
  var resp = JSON.parse(result);
  console.log(resp.value);
}

function request(url) {
  makeAjaxCall(url, function(response){
    it.next(response);
  });
}

var it = main();
it.next();

控制流管理
部署 Iterator 接口

总结

是一个可以『分段执行』的函数
返回一个 Iterator，通过 yield 指定 Iterator 每次返回的值

规范

generator 对象是 generator 函数的实例，有 Iterator 接口
generator 实例从 generator 函数的 prototype 上继承属性