这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战

生成器函数

ES2015的标准增加了：Generators即生成器函数，这篇文章我们就来了解一下什么是生成器函数。

生成器函数使用function*语法编写。 最初调用时，生成器函数不执行任何代码，而是返回一种称为Generator的迭代器。 通过调用生成器的下一个方法（即next()）消耗值时，Generator函数将执行，直到遇到yield关键字。

如何使用

定义生成器函数

我们定义一个名为createUserGenerators的生成器函数，定义方式如下：

function* createUserGenerators
或
function*createUserGenerators
或
function *createUserGenerators

个人推荐使用第一种方式，感觉语义化更好点，用*标记当前函数为生成器函数，如下：

function* createUserGenerators() {
    yield { name: "也笑" }
    yield { height: "183cm" }
}

第一次调用返回：Generator的迭代器，如下：

const generator = createUserGenerators()
console.log(generator) // Object [Generator] {}

调用生成器next方法两次，如下：

console.log(generator.next());
console.log(generator.next());

输出如下：

{ value: { name: '也笑' }, done: false }
{ value: { height: '183cm' }, done: false }

再次调用next方法，执行如下：

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

此次调用我们可以看到value为undefined、done为true，这是因为我们函数中只有两个yield 表达式，最后再执行表示已经执行完了。

使用场景

不知道在你刚接触前端的时候，有没有这样来请求接口：当我们需要请求两个或者更多的接口后再处理数据的时候，我们可能会一层套一层的像下请求，后面看着很不舒服，那么现在我们就可以用Generator来解决这个问题。我们来举个例子，当我们拿到所有的数据后在执行后面的操作，如下:

function* getData() {
    let name, age, height;
    yield name = '也笑'
    yield age = '812'
    yield height = '183cm'

    // do somthing
    console.log(`姓名：${name} 年龄：${age} 身高：${height}`);
}

const data = getData()

function callGenerator(task) {
    const obj = task.next()
    if (obj.done) return
    callGenerator(task)
}

callGenerator(data)

输出如下：

姓名：也笑 年龄：812 身高：183cm

注意事项

Generator函数有个next方法，我们每次调用它里面的yeild表达式的时候我们都要通过此方法。

总结

在项目中合理的使用生成器函数，可以让我们的代码看着更简洁，更容易阅读。

如果你想了解ES的其他特性，请移步到 ES2015+碎片化学习，每天都在向前走一步，这是所有文章的目录入口。