在 JavaScript 中，我们通常使用函数来封装一些功能代码，以便复用和提高代码的可维护性。而 Generator 函数则更进一步，允许我们在函数执行的过程中暂停或恢复执行，并产生一个可以被多次迭代的序列。
Generator 函数的定义与使用
Generator 函数是一种特殊的 JavaScript 函数，它可以通过 function* 关键字来定义。Generator 函数内部使用 yield 关键字来暂停函数的执行并返回一个值，同时可以使用 next() 方法来继续执行暂停的代码。让我们来看一个简单的例子：
// javascriptcn.com 代码示例
function* myGenerator() {
yield 1;
yield 2;
yield 3;
}
const gen = myGenerator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3在这个例子中，我们定义了一个 Generator 函数 myGenerator()，并在内部使用 yield 关键字返回了三个值。然后我们通过调用 myGenerator() 函数创建了一个 gen 对象，并使用其 next() 方法来依次输出 myGenerator() 中返回的三个值。
需要注意的是，Generator 函数可以随时暂停执行并保存当前执行状态，也可以在后面恢复执行。因此，我们可以通过迭代器来多次从 Generator 函数中获取返回值。例如，我们可以使用 for...of 循环来遍历 myGenerator() 函数的返回值：
for (let value of myGenerator()) {
console.log(value);
}
// 1
// 2
// 3在这个例子中，我们使用 for...of 循环遍历 myGenerator() 函数的迭代器，并输出每个返回值，这里的返回值即为 yield 关键字后面的值。
ES10 迭代器
在 ES6 中，我们引入了 Symbol.iterator 符号来表示一个对象可以被迭代。而在 ES10 中，我们引入了 Symbol.asyncIterator 符号来表示一个对象可以被异步迭代。
在 JavaScript 中，所有的 Generator 函数都会返回一个迭代器对象，该对象包含了多个方法来控制 Generator 函数的执行。而 ES10 则进一步定义了异步迭代器，使我们能够异步地遍历序列的值。
在异步迭代器中，返回的值是一个 Promise，需要通过 await 关键字来获取其解析后的结果。例如：
// javascriptcn.com 代码示例
async function* myAsyncGenerator() {
yield await Promise.resolve(1);
yield await Promise.resolve(2);
yield await Promise.resolve(3);
}
const gen = myAsyncGenerator();
(async function () {
for await (let value of gen) {
console.log(value);
}
})();
// 1
// 2
// 3在这个例子中，我们定义了一个异步 Generator 函数 myAsyncGenerator()，并分别返回三个已解析的 Promise 对象。然后我们通过调用 myAsyncGenerator() 函数创建了一个 gen 对象，并使用 for await...of 循环来遍历 myAsyncGenerator() 函数的异步迭代器，并输出每个已解析的 Promise 对象的值。
需要注意的是，异步迭代器需要使用 async function* 来定义，表示这是一个异步的 Generator 函数。同时，在异步迭代器中需要使用 yield await 关键字来返回一个已解析的 Promise 对象。
总结
通过学习 Generator 函数和 ES10 迭代器，我们可以更好地掌握 JavaScript 中的迭代和异步编程。通过使用 Generator 函数，我们可以在函数执行过程中暂停或恢复代码的执行，并创建一个可以被多次迭代的序列。而通过使用 ES10 迭代器，则可以异步地遍历一个序列的值，从而更好地处理异步编程的问题。
需要注意的是，Generator 函数和异步迭代器虽然很强大，但也需要谨慎使用。在使用 Generator 函数和异步迭代器时，我们需要考虑代码的可读性和可维护性，并避免出现过多的回调嵌套和执行状态的混乱。
如果你想深入了解 Generator 函数和 ES10 迭代器，可以查看官方文档或相关书籍，并尝试编写一些实际的代码来加深理解。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6583b01bd2f5e1655de8528a