迭代器是定义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 }; } } };}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; }}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', '写代码', '测试']; }*[Symbol.iterator]() {for (const task of this.tasks) {yield task.toUpperCase();}}}
const list = new TaskList();for (const task of list) {console.log(task);}// 输出：// 学习ES6// 写代码// 测试
通过在类中定义生成器方法作为 [Symbol.iterator]，我们让 TaskList 实例可以直接用于 for…of 循环，且自动转换为大写输出。
基本上就这些。迭代器和生成器看似抽象，但在处理数据流、优化性能、构建工具函数时非常有用。掌握它们，能让代码更优雅、更高效。
以上就是JavaScript迭代器与生成器实战的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1530662.html
微信扫一扫 
支付宝扫一扫 
