js中generator函数的原理和使用

generator又名生成器函数，它是一个崭新的函数类型，它和标准的普通函数完全不同。通过显式的调用生成器函数，能对应的产生一个新的值。通过多次调用后，产生一组值的序列，直到生成器告诉我们无法在产生新的值了。每当生成器函数产生一个新值后，它的执行状态会被保留，直到下次请求到来，它就会从上次离开的位置恢复执行。

1、如何定义generator函数

下面我们来看一个简单的例子：

// 通过在function后面添加星号*来定义生成器函数
function* myGenerator() {
    // 使用关键字yield产生值
    yield "first";
    yield "second";
    yield "third";
}
// 生成迭代器gen
let gen = myGenerator();
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());

上述例子首先定义了一个生成器函数，它能够产生一系列的值。创建生成器函数非常简单，只要在function后面加上一个星号(*)。然后只要在函数体内部使用关键字yield，就能产生值了。

要使用生成器函数，需要先对它进行调用，并生成迭代器gen。

let gen = myGenerator();

之后每当你想要获取一组新的值时，调用gen.next()方法即可。gen.next这个方法会执行函数内部代码，直到遇到yield为止，停止执行，并将yield后面的值返回。返回格式为{ value, done }，其中value表示本次yield的值，done表示生成器函数是否执行完成。从上面的输出结果可以看出，从第四次开始（包括第四次），value就为undefined，done为true，表示生成器已经执行完成，之后再调用gen.next()方法输出的都是相同的结果。

2、如何和generator函数进行交互

从上述的例子可以看到，我们可以通过yield来从生成器中产生多个值并返回。但是生成器的功能远不止如此，我们还可以向生成器发送值。当我们调用next方法获取一个值时，我们可以对值进行一系列的操作，然后在处理完成时，再把计算结果传递给生成器。

下面我们来看个简单的例子：

// 生成器函数可以接受参数
function* myGenerator(msg) {
    const resultMsg = yield ("first & " + msg);
    console.log(resultMsg); // world
    yield ("second & " + resultMsg + " & " + msg);
}
// 调用生成器函数时传递参数，并生成迭代器gen
const gen = myGenerator("hello");
const result1 = gen.next();
console.log(result1); // {value: "fir