深入理解 JavaScript 生成器：特性、用法与实战场景
JavaScript 生成器是一类特殊的函数，核心能力在于支持暂停执行与后续恢复执行，打破了传统函数“一次性执行完毕”的固有逻辑。它通过 function* 语法定义，借助 yield 关键字实现执行暂停并返回中间值，兼容性极佳，在 Node.js 与浏览器环境中均有广泛应用。
一、生成器核心概述
与普通函数不同，生成器函数首次调用时并不会执行内部代码，而是返回一个生成器对象——这是一种特殊的迭代器，承载着函数的执行状态。只有通过调用生成器对象的 next() 方法，函数才会开始执行，直至遇到第一个 yield 关键字后暂停。
需要注意两个关键特性：一是每次调用生成器函数，都会返回一个全新的生成器对象，彼此状态独立；二是单个生成器对象仅能迭代一次，迭代结束后再次调用 next()，返回值的 done 属性会始终为 true。
生成器函数的基础语法简洁直观，以下是最简化的示例，通过三个 yield 语句依次返回不同值：
function* generator() {
yield 1;
yield 2;
yield 3;
}二、生成器的调用方式
获取生成器函数的返回值（包括中间值和最终值），核心依赖生成器对象的 next() 方法。每次调用 next()，函数会从当前暂停位置恢复执行，直至遇到下一个 yield 暂停，或函数执行完毕。
next() 方法的返回值是一个固定结构的对象，包含两个属性：
value：对应
yield关键字后表达式的结果，函数执行完毕后该值为undefined（若有return语句则为 return 的值）；done：布尔值，
false表示函数未执行完毕（可继续调用next()），true表示生成器已迭代结束。
结合前文定义的 generator 函数，调用示例如下：
const gen = generator();
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 }三、生成器的迭代遍历
由于生成器对象本质是迭代器，除了手动调用 next()，还可通过 for...of 循环自动迭代，无需手动判断 done 属性，代码更简洁高效。迭代过程中，循环会自动调用 next()，并将每次 yield 返回的 value 作为循环变量，直至 done 为 true 时终止循环（不会包含 done: true 对应的 value）。
使用 for...of 遍历前文 generator 函数的示例：
const gen = generator();
for (const value of gen) {
console.log(value);
}
// 输出结果：
// 1
// 2
// 3四、生成器的实际应用场景
生成器的特性使其在异步处理、流式数据处理等场景中具备独特优势，尤其在复杂业务逻辑中能简化代码结构，提升可读性。
1. 异步操作处理
在异步编程中，生成器可替代早期的回调函数，实现“同步化写法”的异步逻辑——通过 yield 暂停函数执行，等待异步操作完成后再恢复，避免回调嵌套（“回调地狱”）。虽然如今 async/await 语法更主流（本质是生成器的语法糖），但生成器仍是理解异步编程原理的重要基础，在部分老旧项目或特殊场景中仍有应用。
2. 流式数据处理
生成器是处理流式数据的理想工具，尤其在 AI 模型交互、大文件传输等场景中。它无需等待所有数据加载完成再返回，而是可以逐段生成（yield）数据，前端则逐段接收并渲染，提升页面响应速度和用户体验。
以下是生成器处理流式数据的基础示例，模拟从接口获取流数据并逐段处理：
function* streamGenerator() {
const response = yield fetch('server/api'); // 暂停等待接口响应
const stream = response.body.getReader(); // 获取流读取器
while (true) {
const { done, value } = yield stream.read(); // 逐段读取流数据
if (done) break;
console.log('处理流数据片段：', value);
}
}3. SSE 流数据实战补充
在前端与大模型交互等场景中，常需通过 SSE（服务器发送事件）接收流式响应。需要注意的是，原生 fetch 函数处理 SSE 接口时仅支持 GET 方法，无法满足复杂场景（如请求体过大、携带文件/图片等）的 POST 需求。
此时可借助微软开发的 @microsoft/fetch-event-source 库，它对原生 fetch 进行了扩展，完善了 SSE 支持，允许通过 POST 方法发送请求并接收流数据，完美适配大模型交互等复杂业务场景。