生成器函数是JavaScript中可暂停和恢复执行的特殊函数,通过function*定义并返回迭代器对象,使用yield逐步返回值,适合处理惰性求值与异步流程。

在JavaScript中,生成器函数是一种特殊类型的函数,它可以在执行过程中暂停和恢复,通过 yield 关键字返回多个值。这种特性使得生成器非常适合处理惰性求值、迭代大量数据或控制异步流程。
什么是生成器函数
生成器函数不会一次性运行完毕,而是可以在执行中途暂停,之后再从中断处继续执行。调用生成器函数时,它并不立即执行函数体,而是返回一个迭代器对象(Iterator),通过调用该对象的 next() 方法来逐步推进函数的执行。
如何定义生成器函数
定义生成器函数有以下几种方式:
1. 使用 function* 语法(最常见)在函数关键字后加一个星号 *,即可定义一个生成器函数。
function* myGenerator() {
yield '第一项';
yield '第二项';
yield '第三项';
}
2. 作为对象中的方法
在对象字面量或类中,也可以使用简写形式定义生成器方法。
const obj = {
* generatorMethod() {
yield 1;
yield 2;
}
};
3. 通过 GeneratorFunction 构造器(不常用)
类似于 new Function,可以动态创建生成器函数,但实际开发中很少使用。
生成器函数的基本使用案例
下面通过几个典型例子展示生成器的实际用途。
Net112企业建站系统,共有:新闻模块,产品模块,案例模块,下载模块,相册模块,招聘模块,自定义模块,友情链接模块 八大模块。Net112企业建站系统附带其他辅助工具:内容采集工具,内容批量查找替换工具,静态页面生成工具,文件管理工具。Net112企业建站其他功能:图片水印功能,图片防盗链功能,相册批量上传功能。Net112企业建站系统使用:利用函数调用模块数据。方便、简单、快捷。适用范围:企业
案例1:简单值的逐步返回
function* count() {
yield 1;
yield 2;
yield 3;
}
const counter = count();
console.log(counter.next()); // { value: 1, done: false }
console.log(counter.next()); // { value: 2, done: false }
console.log(counter.next()); // { value: 3, done: false }
console.log(counter.next()); // { value: undefined, done: true }
案例2:惰性生成无限序列
利用生成器可以按需生成数据,避免一次性计算所有值。
function* fibonacci() {
let a = 0, b = 1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
}
const fib = fibonacci();
console.log(fib.next().value); // 0
console.log(fib.next().value); // 1
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2
console.log(fib.next().value); // 3
案例3:遍历自定义数据结构
为对象添加生成器方法,使其可被 for...of 遍历。
class TaskList {
constructor() {
this.tasks = [];
}
add(task) {
this.tasks.push(task);
}
- [Symbol.iterator]() { for (let task of this.tasks) { yield task.toUpperCase(); } } }
const list = new TaskList(); list.add('学习JS'); list.add('练习编码');
for (let task of list) { console.log(task); } // 输出: // 学习JS // 练习编码
yield 和 return 的区别
在生成器中,yield 是暂停并返回值,后续可继续执行;而 return 是结束生成器,并设置 done: true。return 的值也会出现在 value 中。
function* example() {
yield 'a';
return 'end';
yield 'b'; // 不会被执行
}
const it = example();
console.log(it.next()); // { value: 'a', done: false }
console.log(it.next()); // { value: 'end', done: true }
基本上就这些。生成器函数虽然不常直接用于日常业务逻辑,但在实现高级迭代逻辑、状态机或配合 async/await(背后原理就是生成器+Promise)时非常有用。理解其工作机制有助于深入掌握 JavaScript 的异步编程模型。









