导航
×
   ❮   
HTML CSS JavaScript PHP Go Sass W3C Colors ECMS

JS 教程

JS 简介 JS 如何使用 JS 输出 JS 语法 JS 语句 JS 注释 JS 变量 JS 运算符 JS 条件语句 JS 循环 JS 字符串 JS 数字 JS 函数 JS 对象 JS 日期 JS 数组 JS 类型化数组 JS 集合 JS Map 映射 JS Math JS 正则表达式 JS 数据类型 JS 错误 JS 事件 JS 编程 JS 关键字参考 JS 保留关键字参考 JS 运算符参考 JS 运算符优先级 JS UTF-8 字符 JS UTF-8 符号 JS UTF-8 表情符号 JS 版本

JS 高级教程

JS 对象 JS 函数 JS 类 JS 迭代 JS Promises JS 模块

JavaScript 生成器


JavaScript 函数只能返回一个值。

JavaScript 生成器可以逐个返回多个值。

JavaScript 生成器可以生成数据流。

JavaScript 生成器可以暂停和恢复。

生成函数

生成函数使用 function* 语法定义:

function* myGenerator() {}

生成器函数被调用时,返回的是一个生成器对象,而不是直接返回一个值。

{value:1, done:false}

生成器对象

生成器函数会返回一个生成器对象

它同时符合 iterable 和 iterator 协议,这意味着可以使用for...of 循环对其进行迭代。

示例

function* myStream() {
// return {value:1, done:false}
yield 1;

// return {value:2, done:false}
yield 2;

// return {value:3, done:true}
return 3;
}

// 创建一个生成器
let myGenerator = myStream();

// 遍历生成器
for (let value of myGenerator) { // code }
亲自试一试 »

yield 关键字

yield 关键字会暂停执行,并将一个值yield返回给调用者。

生成器的状态会被保留,并且在调用 next() 时可以从 yield 的位置恢复执行。

生成器在 yield 调用之间会保持其内部状态,从而可以从上次中断的地方继续执行。

注意

上面的代码示例返回 1 和 2,而不是 3!

done: true 时,for...of 循环退出。

要获取所有值,请使用 yield 返回它们。

示例

function* myStream() {
// return {value:1, done:false}
yield 1;

// return {value:2, done:false}
yield 2;

// return {value:3, done:false}
yeald 3;
}

// 创建一个生成器
let myGenerator = myStream();

// 遍历生成器
for (let value of myGenerator) { // code }
亲自试一试 »

生成器对象方法

生成器对象遵循iterableiterator协议。

可以使用for...of循环对其进行迭代。

它还具有方法:

方法 描述
next() 继续执行生成器函数的下一次执行
return() 结束当前执行并返回给定值
throw() 在当前执行中抛出异常

next() 方法

当对 Generator 对象调用此方法时,它会恢复生成器函数的执行。

它返回一个包含一个值和一个布尔值的对象,该布尔值指示生成器是否已完成:

{ value: value, done: true|false}


自定义迭代器

生成器简化了复杂数据结构或序列的自定义迭代器的创建。

它们可以高效地按需生成值,因此适用于潜在的无限数据流

它们可以暂停和恢复执行,这对于对程序流程进行细粒度控制非常有用。

在 async/await 出现之前,生成器与 Promise 一起使用,以更像顺序执行的方式管理异步操作。

注意

生成器将迭代的概念直接引入到 JavaScript 核心语言中,并提供了一种自定义 for...of 循环行为的机制。


Copyright ©2020-2026 freew3c.com All Rights Reserved 提供的内容仅用于学习和测试,不保证内容的正确性。