Generators are a powerful feature in JavaScript that allow you to pause and resume the execution of a function, yielding values at specific points. This guide will help you understand how to use generators effectively in your code.
Basic Usage
To create a generator, you define a function using the function*
syntax. Inside the generator function, you use the yield
keyword to pause the execution and return a value.
function* generatorFunction() {
yield 'First';
yield 'Second';
yield 'Third';
}
const gen = generatorFunction();
console.log(gen.next().value); // 'First'
console.log(gen.next().value); // 'Second'
console.log(gen.next().value); // 'Third'
Yielding Values
Generators can yield values at any point during their execution. This is useful for creating iterators that can be paused and resumed.
function* numberGenerator() {
for (let i = 0; i < 5; i++) {
yield i;
}
}
const gen = numberGenerator();
console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3
console.log(gen.next().value); // 4
Returning from Generators
You can return a value from a generator using the return
statement. When the return
statement is executed, the generator function stops executing and returns the specified value.
function* generatorFunction() {
yield 'First';
yield 'Second';
return 'Third';
}
const gen = generatorFunction();
console.log(gen.next().value); // 'First'
console.log(gen.next().value); // 'Second'
console.log(gen.next().value); // 'Third'
Using Generators with Async/Await
Generators can be used with async/await
syntax to handle asynchronous operations in a synchronous-like manner.
async function* asyncGenerator() {
const data = await fetchData();
for (let item of data) {
yield item;
}
}
async function processItems() {
for await (let item of asyncGenerator()) {
console.log(item);
}
}
processItems();
For more information on generators and their usage, check out our Advanced Generators Guide.
# 生成器指南
生成器是 JavaScript 中的一个强大特性,允许你在函数执行过程中暂停和恢复执行,在特定点返回值。本指南将帮助您了解如何有效地使用生成器。
## 基本用法
要创建一个生成器,您可以使用 `function*` 语法定义一个函数。在生成器函数内部,您使用 `yield` 关键字来暂停执行并返回一个值。
```javascript
function* generatorFunction() {
yield 'First';
yield 'Second';
yield 'Third';
}
const gen = generatorFunction();
console.log(gen.next().value); // 'First'
console.log(gen.next().value); // 'Second'
console.log(gen.next().value); // 'Third'
返回值
生成器可以在执行过程中的任何点返回值。这对于创建可以暂停和恢复的迭代器非常有用。
function* numberGenerator() {
for (let i = 0; i < 5; i++) {
yield i;
}
}
const gen = numberGenerator();
console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3
console.log(gen.next().value); // 4
从生成器返回
您可以使用 return
语句从生成器返回一个值。当执行 return
语句时,生成器函数停止执行并返回指定的值。
function* generatorFunction() {
yield 'First';
yield 'Second';
return 'Third';
}
const gen = generatorFunction();
console.log(gen.next().value); // 'First'
console.log(gen.next().value); // 'Second'
console.log(gen.next().value); // 'Third'
与异步/等待一起使用生成器
生成器可以与 async/await
语法一起使用,以同步的方式处理异步操作。
async function* asyncGenerator() {
const data = await fetchData();
for (let item of data) {
yield item;
}
}
async function processItems() {
for await (let item of asyncGenerator()) {
console.log(item);
}
}
processItems();
有关生成器和它们的使用方法的更多信息,请参阅我们的高级生成器指南。