ES6生成器基础

    ES6引进的最令人兴奋的特性就是一种新的函数生成方式，称为生成器(generator)。名称有点奇怪，但是第一眼看上去行为更加奇怪。文章主要介绍生成器如何工作，然后让你明白为什么他们对于未来的JS会有很大的影响。

完成运行

    首先看看生成器和普通函数有什么不同。无论你是否已经意识到，关于你的函数，总是可以很基本的假设一些东西：一但函数开始运行，它总是在其他JS代码可以运行前运行完毕。例子：

setTimeout(function(){
    console.log("Hello World");
},1);

function foo() {
    // NOTE: don't ever do crazy long-running loops like this
    for (var i=0; i<=1E10; i++) {
        console.log(i);
    }
}

foo();
// 0..1E10
// "Hello World"

    在这里，完成for循环会花相当长的时间，比1毫秒长很多，但是我们的计时器回调函数console.log("Hello World")并不能在foo()函数运行期间打断他，所以它卡住了，排在最后面（在循环后面），耐心地等待轮到他。

    但是如果foo()可以被打断是什么样的？难道不会对程序造成严重破坏吗？

    这就是噩梦般的多线程编程挑战，但是很幸运，在JS领土中，不用担心这种情况，因为JS总是单线程的（在任何给定的时间内，只有一条命令\函数执行）。

    注：Web开发人员对于一部分JS程序，可以作为一个独立的线程来运行，完全与主JS线程并行。这样不会引起多线程并行到程序中的理由，是两个线程只能通过普通异步事件和彼此交互，而异步事件遵循的是一次只执行一条的原则。

运行...停止...运行

    通过ES6生成器，有了一种不同的函数，这种函数可以停在中间，一次或者多次，过后又恢复，允许其他代码在这个停止期运行。

    如果阅读过关于并发或者多线程的任何东西，会看到“合作”期，即一个进程（一个函数）自己选择什么时候允许打断，以便它可以和其他代码“合作”。这一概念与"先发"形成对比，表明进程/函数可能违背其意愿被打断。

    ES6生成器函数在并发中是“合作”的。在生成器函数体内，可以使用新的yield关键字从内部暂停自己。没有什么可以从外部暂停一个生成器，函数在内部遇到yield时可以暂停自己。

    但是，生成器函数包含yield暂停自己的时候，它不能恢复自己。必须使用外部控制来重启生成器。后续会介绍这个怎么发生的。

    所以，一个生成器函数可以停止，被重新启动，可以自定义次数。事实上，可以使用一个无限循环(类似while (true) { .. })来指定一个生成器函数。在平常的JS程序里面这可能是疯狂的或者是一个错误，对于生成器函数来说是很理智的，有时就是你想要做到的！

    更重要的，这个停止和开始并不是在生成器函数执行中的一个控制，允许2通道消息传入和传出生成器。在平常的函数中，在开始可以获取到参数，在结尾处获得一个return值。利用生成器函数，使用每个yield向外输出消息，使用每个start回送消息。

语法!

    让我们看看这个新的、令人兴奋的生成器函数的语法。

    首先，新的声明语法：

function *foo() {
    // ..
}

    注意到这里的*了么？这就是全新的有点奇怪的格式。在其他的一些语言里面，看上去很像糟糕的函数返回指针。但是不要疑惑！这只是一个标记生成器函数的方式。
    你也许在其他文章里面看到过function* foo(){ } 来替代 function *foo(){ } (*的位置不同)，这两种情况都是合法的，但是最近觉得function *foo() { }更明确一些，也就是这里用到的方式。

    现在我们讨论一下生成器函数的内容。大多数情况下生成器函数只是普通的JS函数。在生成器函数内部基本没什么新的语法可学的。

    我们主要必须玩会的新玩具，在上面提到过，就是yield关键字。yield__被称为"yield表达式"(不是声明)是因为当启动生成器的时候，我们会传递一个值进去，传递进去的值会是yield表达式的计算结果。例如：

function *foo() {
    var x = 1 + (yield "foo");
    console.log(x);
}

    yield "foo"表达式会在暂停生成器函数的时候将foo值传出来，当生成器重新启动的时候，传递进来的值会是那个表达式的结果，会加1指给x.
    看到2通道的交互了么？你将"foo"传出，暂停了自己，在过后的某时间点（可能是立即，也可能是距离现在很长的一段时间），生成器函数会重新启动会传递一个回送值。

    在任何表达式的位置，在表达式或声明中可以单独使用yield。yield有一个假定的值undefined:

// note: `foo(..)` here is NOT a generator!!
function foo(x) {
    console.log("x: " + x);
}

function *bar() {
    yield; // just pause
    foo( yield ); // pause waiting for a parameter to pass into `foo(..)`
}

生成器迭代器

    迭代器是一种特殊的用法，事实上是一种设计模式，当使用next()进入一系列预选的值中的时候，想象下在一个有5个值的数组上使用迭代器的时候，第一个next()调用会返回1，第二个next()调用会返回2，以此类推。等到所有值被返回，next()会返回null或false或者其他标志位来表示你已经迭代完了所有的值。

    从外部控制生成器函数的方法是使用生成器迭代器构建和交互。听起来比实际复杂些。例子：

function *foo() {
    yield 1;
    yield 2;
    yield 3;
    yield 4;
    yield 5;
}

    进入*foo()生成器的值中，需要构建一个迭代器：

var it = foo();

    所以使用平常的方法调用生成器函数不会执行它的任何一部分。

    这看起来有点奇怪。你也许想要知道，为什么不是var it = new foo()。这语法后的原因很复杂已经超出了这里的讨论范围。

    所以，现在开始迭代我们的生成器函数，我们只需：

var message = it.next();

    这会从yield 1声明返回1，但那不是我们仅仅得到的。

console.log(message); // { value:1, done:false }

    实际上我们从每个next()调用得到了一个对象，它有一个yield传出值的value属性，done是一个表示生成器函数是否运行完成的布尔变量。

    继续看迭代器：

console.log( it.next() ); // { value:2, done:false }
console.log( it.next() ); // { value:3, done:false }
console.log( it.next() ); // { value:4, done:false }
console.log( it.next() ); // { value:5, done:false }

    有趣的是，done在我们得到5这个值的时候仍然是false。这是因为，技术上，生成器函数没有完成。我们不得不调用最后一个next()调用，如果我们传入一个值，它必须作为yield5表达式的结果。只有那时生成器函数完成了。
    所以，现在：

console.log( it.next() ); // { value:undefined, done:true }

    生成器函数的最后的结果是我们调用完成了，但是没有结果给出来。
    你也许想知道，在生成器函数内可以用return么，如果用了，那个值会在value属性里面输出么？

    是的...

function *foo() {
    yield 1;
    return 2;
}

var it = foo();

console.log( it.next() ); // { value:1, done:false }
console.log( it.next() ); // { value:2, done:true }

    不是...

    在生成器内依赖return不是一个好的做法，因为使用for-of循环迭代生成器的时候，最后return的值会被忽略。

    为降低风险，我们迭代生成器的时候看看传递进去和出来信息：

function *foo(x) {
    var y = 2 * (yield (x + 1));
    var z = yield (y / 3);
    return (x + y + z);
}

var it = foo( 5 );

// note: not sending anything into `next()` here
console.log( it.next() );       // { value:6, done:false }
console.log( it.next( 12 ) );   // { value:8, done:false }
console.log( it.next( 13 ) );   // { value:42, done:true }

    可以看到，仍然可以通过内部的foo(5)迭代器实例化调用向内传递参数，就像普通函数一样，使x为5.
    第一个next()调用，我们没有传递任何参数。为什么？因为没有yield表达式来接收传递的参数。

 

英文原文：http://davidwalsh.name/es6-generators