迭代器是定义next方法的对象，返回value和done属性；2. 实现可迭代协议的类型如数组、字符串等具有Symbol.iterator方法；3. 生成器函数通过yield简化迭代器创建，提升处理大数据序列的可读性与性能。
JavaScript中的迭代器和生成器是处理数据序列的强大工具，尤其在面对大量数据或需要自定义遍历逻辑时，它们能显著提升代码的可读性和性能。理解并掌握它们的实际用法，对现代前端开发至关重要。
什么是迭代器（Iterator）
迭代器是一个对象，它定义了一个 next() 方法，返回一个包含 value 和 done 属性的对象。当 done 为 true 时，表示遍历结束。
JavaScript 中很多内置类型都实现了可迭代协议，比如数组、字符串、Map、Set 等，这意味着它们都有一个 [Symbol.iterator] 方法。
示例：手动创建一个迭代器假设我们要遍历一个数字范围：
立即学习“Java免费学习笔记（深入）”；
function createRangeIterator(start, end) {
let current = start;
return {
next() {
if (current <= end) {
return { value: current++, done: false };
} else {
return { done: true };
}
}
};
}
<p>const iter = createRangeIterator(1, 3);
iter.next(); // { value: 1, done: false }
iter.next(); // { value: 2, done: false }
iter.next(); // { value: 3, done: false }
iter.next(); // { done: true }
这个例子展示了如何手动实现一个简单的计数迭代器。虽然写起来稍显繁琐，但它帮助理解底层机制。
使用生成器简化迭代器创建
生成器函数是创建迭代器的“语法糖”。只需在函数名前加一个 *，并在内部使用 yield 返回值，函数就会自动返回一个迭代器对象。
示例：用生成器重写 range 函数function* rangeGenerator(start, end) {
for (let i = start; i <= end; i++) {
yield i;
}
}
<p>const gen = rangeGenerator(1, 3);
gen.next(); // { value: 1, done: false }
gen.next(); // { value: 2, done: false }
gen.next(); // { value: 3, done: false }
gen.next(); // { done: true }
代码更简洁，逻辑更清晰。你不需要手动管理状态和 next 方法，JavaScript 引擎会帮你处理。
生成器函数可以暂停和恢复执行。每次遇到 yield，函数暂停，下次调用 next() 才继续。
生成器在实际项目中的应用
生成器不只是用来生成数字序列。它们在异步编程、状态管理、大数据流处理中也有实用场景。
- 惰性求值：只在需要时计算下一个值，节省内存。例如处理大文件或无限序列。
- 异步流程控制：结合 Promise 使用，可以让异步代码看起来像同步的（虽然现在 async/await 更常用）。
- 状态机：用 yield 控制状态流转，适合实现复杂的业务流程。
假设你要从服务器“一页一页”获取用户数据：
function* fetchUsersPage() {
let page = 1;
while (true) {
const response = yield fetch(`/api/users?page=${page}`);
const data = yield response.json();
if (data.length === 0) break;
page++;
yield* data; // 将数组每一项依次 yield 出去
}
}
注意这里用了 yield*，它可以将另一个可迭代对象的内容逐个 yield 出来。
虽然真实项目中我们会用 async/await 配合事件或回调处理分页，但这个例子展示了生成器在控制流程上的灵活性。
可迭代协议与 for...of 的配合
为了让自定义对象支持 for...of 循环，你需要实现 [Symbol.iterator] 方法，并让它返回一个迭代器。
示例：让一个类成为可迭代对象class TaskList {
constructor() {
this.tasks = ['学习ES6', '写代码', '测试'];
}
<p>*[Symbol.iterator]() {
for (const task of this.tasks) {
yield task.toUpperCase();
}
}
}</p><p>const list = new TaskList();
for (const task of list) {
console.log(task);
}
// 输出：
// 学习ES6
// 写代码
// 测试
通过在类中定义生成器方法作为 [Symbol.iterator]，我们让 TaskList 实例可以直接用于 for...of 循环，且自动转换为大写输出。
基本上就这些。迭代器和生成器看似抽象，但在处理数据流、优化性能、构建工具函数时非常有用。掌握它们，能让代码更优雅、更高效。
