ES6 和 ES7 是 JavaScript 语言的两个重要版本，其中 ES6 引入了许多新的语言特性，其中一个重要的特性就是 generator 函数。本文将详细介绍 generator 函数的知识，包括其定义、使用方法、示例代码以及学习和指导意义。
什么是 generator 函数？
generator 函数是 ES6 引入的一种新的函数类型，它可以通过 function* 关键字来定义。generator 函数和普通函数的不同之处在于，它可以在函数执行过程中多次暂停和恢复执行，从而可以实现一些特殊的功能。
在 generator 函数中，使用 yield 关键字可以让函数暂停执行，并返回一个值。当再次调用 next() 方法时，函数会从上一次暂停的位置继续执行，直到遇到下一个 yield 关键字或函数结束。
下面是一个简单的 generator 函数示例：
// www.javascriptcn.com code example
function* myGenerator() {
yield 'hello';
yield 'world';
return 'done';
}
const gen = myGenerator();
console.log(gen.next()); // { value: 'hello', done: false }
console.log(gen.next()); // { value: 'world', done: false }
console.log(gen.next()); // { value: 'done', done: true }在上面的示例中，myGenerator() 函数定义了两个 yield 关键字和一个 return 语句。当我们通过 gen.next() 方法来调用该函数时，它会依次返回 hello、world 和 done 三个值。
generator 函数的使用方法
generator 函数的使用方法比较灵活，可以用于实现一些特殊的功能。下面是一些常见的使用场景：
生成器
generator 函数可以用于生成一些序列或者集合，例如生成斐波那契数列：
// www.javascriptcn.com code example
function* fibonacci() {
let a = 0, b = 1;
while (true) {
yield b;
[a, b] = [b, a + b];
}
}
const gen = fibonacci();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }异步编程
generator 函数可以用于实现异步编程，例如使用 yield 关键字暂停执行，等待异步操作完成后再恢复执行：
// www.javascriptcn.com code example
function* myAsyncFunction() {
const result1 = yield fetch('https://api.example.com/data1');
const result2 = yield fetch('https://api.example.com/data2');
return [result1, result2];
}
const gen = myAsyncFunction();
gen.next().value.then(result1 => {
gen.next(result1).value.then(result2 => {
gen.next(result2);
});
});在上面的示例中，myAsyncFunction() 函数通过 yield 关键字暂停执行，等待异步操作完成后再恢复执行。通过手动调用 next() 方法来依次执行每个异步操作，最终得到结果。
迭代器
generator 函数可以用于实现迭代器，例如通过 yield 关键字依次返回一个集合中的每个元素：
// www.javascriptcn.com code example
function* myIterator(collection) {
for (let i = 0; i < collection.length; i++) {
yield collection[i];
}
}
const myArray = [1, 2, 3];
const gen = myIterator(myArray);
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }在上面的示例中，myIterator() 函数通过 yield 关键字依次返回一个集合中的每个元素。通过手动调用 next() 方法来依次获取每个元素，最终得到所有元素。
generator 函数的学习和指导意义
generator 函数是 ES6 中的一个重要特性，它可以用于实现一些特殊的功能，例如生成器、异步编程和迭代器。学习 generator 函数可以帮助我们更好地掌握 JavaScript 语言的基础知识，并提高编程能力和效率。
在实际开发中，我们可以使用 generator 函数来简化代码、提高性能和减少 bug。例如，通过使用 generator 函数来实现异步编程，可以减少回调嵌套和提高代码可读性；通过使用 generator 函数来实现迭代器，可以简化代码逻辑和提高代码复用性。
总之，学习 generator 函数对于前端开发人员来说是非常有意义的，它可以帮助我们更好地掌握 JavaScript 语言的核心特性，以及提高编程能力和效率。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d2de1ea941bf7134593653