JavaScript 生成器

生成器

生成器（generator）是ES6标准引入的新的数据类型。一个生成器看上去像一个函数，但可以返回多次。类似python的生成器。

生成器（Generator）是一种特殊的函数，它允许你逐行执行代码，并在执行过程中多次“暂停”和“恢复”。

用法分类	说明	代码示例
定义	使用function*定义生成器，用yield表达式返回值。	function* idGenerator() { ... }
执行	调用生成器函数返回一个生成器对象，该对象可以通过next()方法逐行执行。	let generatorObj = idGenerator();
逐行执行	使用next()方法逐行执行生成器，每次遇到yield就暂停并返回结果。	let result = generatorObj.next();
状态	next()方法的返回值包含value和done两个属性，分别表示当前yield的值和生成器是否完成。	result.value // 当前yield的值 result.done // 是否完成
完成	当生成器执行到末尾或执行到return语句时，done属性为true。	if (result.done) { ... }
迭代	使用for...of循环直接迭代生成器对象。	for (let value of generatorObj) { ... }
异步流程控制	生成器可以与yield配合使用，将异步操作转化为同步风格的代码。	let data = yield fetchData();
错误处理	在生成器内部使用try...catch捕获外部next()传入的错误。	try { yield someAsyncFunction(); } catch (e) { ... }
再次调用	一旦生成器完成，再次调用next()将返回{ value: undefined, done: true }。	generatorObj.next();

function foo(x) {
    return x + x;
}
let r = foo(1); // 调用foo函数

// generator跟函数很像，定义如下：
function* foo(x) {
    yield x + 1;
    yield x + 2;
    return x + 3;
}

generator和函数不同的是，generator由function*定义（注意多出的*号），并且，除了return语句，还可以用yield返回多次。

// 斐波那契数列: 0 1 1 2 3 5 8 13 21 34 ...
function fib(max) {
    let
        t,
        a = 0,
        b = 1,
        arr = [0, 1];
    while (arr.length < max) {
        [a, b] = [b, a + b];
        arr.push(b);
    }
    return arr;
}

// 测试:
fib(5); // [0, 1, 1, 2, 3]
fib(10); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

// 函数只能返回一次，所以必须返回一个Array。但是，如果换成generator，就可以一次返回一个数，不断返回多次。用generator改写如下：
function* fib(max) {
    let
        t,
        a = 0,
        b = 1,
        n = 0;
    while (n < max) {
        yield a;
        [a, b] = [b, a + b];
        n ++;
    }
    return;
}
// 直接调用试试：
fib(5); // fib {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window}
// 直接调用一个generator和调用函数不一样，fib(5)仅仅是创建了一个generator对象，还没有去执行它。
// 调用generator对象有两个方法，一是不断地调用generator对象的next()方法：
let f = fib(5);
f.next(); // {value: 0, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 2, done: false}
f.next(); // {value: 3, done: false}
f.next(); // {value: undefined, done: true}

next()方法会执行generator的代码，然后，每次遇到yield x;就返回一个对象{value: x, done: true/false}，然后“暂停”。返回的value就是yield的返回值，done表示这个generator是否已经执行结束了。如果done为true，则value就是return的返回值。当执行到done为true时，这个generator对象就已经全部执行完毕，不要再继续调用next()了。

第二个方法是直接用for ... of循环迭代generator对象，这种方式不需要我们自己判断done：

function* fib(max) {
    let
        a = 0,
        b = 1,
        n = 0;
    while (n < max) {
        yield a;
        [a, b] = [b, a + b];
        n ++;
    }
    return;
}

for (let x of fib(10)) {
    console.log(x); // 依次输出0, 1, 1, 2, 3, ...
}

因为generator可以在执行过程中多次返回，所以它看上去就像一个可以记住执行状态的函数，利用这一点，写一个generator就可以实现需要用面向对象才能实现的功能。例如，用一个对象来保存状态，得这么写：

let fib = {
    a: 0,
    b: 1,
    n: 0,
    max: 5,
    next: function () {
        let
            r = this.a,
            t = this.a + this.b;
        this.a = this.b;
        this.b = t;
        if (this.n < this.max) {
            this.n ++;
            return r;
        } else {
            return undefined;
        }
    }
};

用对象的属性来保存状态，相当繁琐。generator还有另一个巨大的好处，就是把异步回调代码变成“同步”代码。这个好处要等到后面学了AJAX以后才能体会到。没有generator之前的黑暗时代，用AJAX时需要这么写代码：

ajax('http://url-1', data1, function (err, result) {
    if (err) {
        return handle(err);
    }
    ajax('http://url-2', data2, function (err, result) {
        if (err) {
            return handle(err);
        }
        ajax('http://url-3', data3, function (err, result) {
            if (err) {
                return handle(err);
            }
            return success(result);
        });
    });
});

回调越多，代码越难看。有了generator的美好时代，用AJAX时可以这么写：

try {
    r1 = yield ajax('http://url-1', data1);
    r2 = yield ajax('http://url-2', data2);
    r3 = yield ajax('http://url-3', data3);
    success(r3);
}
catch (err) {
    handle(err);
}