JavaScript生成器函数(generator function)

在讲生成器函数之前，大家有没有听过数组推导式和生成器推导式呢？要注意了，这两者可都并非标准语法所以建议不要使用哦。

先来看一下生成器函数的语法：

function* 函数名(参数){函数体}

1.生成器函数在执行时是能暂停的，后面又能从暂停的地方继续执行

使用yield关键字可以暂停函数

2.调用一个生成器函数，就会得到一个生成器的迭代对象

（1）使用next()方法。被首次或后续调用时，其内部的语句会执行到第一个（后续）出现的yield的位置为止。yield 后紧跟迭代器要返回的值。

（2）yield*（多了个星号），则表示将执行权移交给另一个生成器函数（当前生成器暂停执行）。

（3）next()-> {value:value1,done:true|false}

value:表示本次返回的值，即yield表达式返回的值

done：表示生成器后续是否还有yield语句,即生成器函数是否已经执行完毕并返回。

需要注意的是在调用next()方法时，如果传入了参数，那么这个参数会作为上一条直线的yield语句的返回值。

我们来看几个小demo

function * gen(){
    yield 10;
    y = yield 'foo';
    yield y;
}

var gen_obj = gen();
console.log(gen_obj.next()); // 10
console.log(gen_obj.next());
console.log(gen_obj.next(11));
console.log(gen_obj.next());

​

编辑

添加图片注释，不超过 140 字（可选）

输出的结果如上图所示。

接下来我们再看看计数器生成器版本

const num = function*(n=0){
    while (true){
        if(n>=11) return n;
        yield ++n;
    }
}()

console.log(num.next())
for(let i of num){
    console.log(i)
}

​

编辑

添加图片注释，不超过 140 字（可选）

yield*的示例

function* anotherGenerator(i) {
  yield i + 1;
  yield i + 2;
  yield i + 3;
}

function* generator(i){
  yield i;
  yield* anotherGenerator(i);// 移交执行权
  yield i + 10;
}

var gen = generator(10);

console.log(gen.next().value); // 10
console.log(gen.next().value); // 11
console.log(gen.next().value); // 12
console.log(gen.next().value); // 13
console.log(gen.next().value); // 20

​

编辑

添加图片注释，不超过 140 字（可选）