迭代器模式通过实现next()方法返回value和done属性，用于顺序访问集合元素。ES6引入Iterator接口，使数组、字符串等内置类型支持for…of循环和扩展运算符。Symbol.iterator方法让对象可迭代，自定义对象可通过添加该方法实现遍历。生成器函数function*简化迭代器创建，支持惰性求值与无限序列。常见遍历方式中，for…of基于迭代器协议，适合处理可迭代对象；while配合next()灵活但代码较长；forEach、map等适用于特定数据转换场景。掌握迭代器有助于理解JS遍历机制并编写通用逻辑。
JavaScript 中的迭代器模式是一种设计模式，用于顺序访问集合中的元素，而无需暴露其底层结构。这种模式在处理数组、类数组对象以及自定义数据结构时非常有用。ES6 引入了原生的 Iterator 接口，让很多内置类型默认可被遍历，并支持 for…of 循环和扩展运算符。
什么是迭代器（Iterator）？
一个迭代器是一个对象，它定义了一个序列，并可能返回一系列值的终止状态。迭代器必须实现 next() 方法，该方法返回一个包含两个属性的对象：
value：当前步骤的值done：布尔值，表示遍历是否完成
当 done 为 true 时，表示迭代结束，此时 value 可选。
示例：手动创建一个简单的迭代器
立即学习“Java免费学习笔记（深入）”；
function createArrayIterator(arr) { let index = 0; return { next: function() { return index < arr.length ? { value: arr[index++], done: false } : { done: true }; } };}const iter = createArrayIterator([1, 2, 3]);console.log(iter.next()); // { value: 1, done: false }console.log(iter.next()); // { value: 2, done: false }console.log(iter.next()); // { value: 3, done: false }console.log(iter.next()); // { done: true }
可迭代协议与 Symbol.iterator
为了让一个对象可被 for…of 遍历，它必须是“可迭代的”，即实现了 Symbol.iterator 方法。这个方法返回一个迭代器对象。
常见的可迭代对象包括：Array、String、Map、Set、arguments、NodeList 等。
示例：使用 Symbol.iterator 获取数组的迭代器
const arr = [10, 20];const iterator = arr[Symbol.iterator]();console.log(iterator.next()); // { value: 10, done: false }console.log(iterator.next()); // { value: 20, done: false }console.log(iterator.next()); // { done: true }
你可以为自定义对象添加 Symbol.iterator 来使其可迭代。
const myCollection = { items: ['a', 'b', 'c'], [Symbol.iterator]() { let index = 0; return { next: () => { return index < this.items.length ? { value: this.items[index++], done: false } : { done: true }; } }; }};for (const item of myCollection) {console.log(item); // 输出 a, b, c}
JavaScript 常见的遍历方法对比
不同的遍历方式适用于不同场景。以下是常见方法及其特点：
for 循环：传统方式，控制力强，适合数组索引操作for…in：遍历对象的可枚举属性（包括继承），不推荐用于数组for…of：基于迭代器协议，遍历可迭代对象的值，最适用于数组和类数组forEach()：数组方法，执行回调函数，不能中断（break/return 无效）map/filter/reduce：函数式方法，返回新数组或结果，适合数据转换while + next()：直接使用迭代器控制流程，灵活但代码较长
示例：for…of 遍历字符串和 Set
for (const char of "hi") { console.log(char); // h, i}for (const num of new Set([1, 2, 2])) {console.log(num); // 1, 2}
生成器函数：更优雅的迭代器实现
生成器函数（function*）是创建迭代器的简便方式。它会自动返回一个符合迭代器协议的对象。
function* gen() { yield 1; yield 2; yield 3;}const g = gen();console.log(g.next()); // { value: 1, done: false }console.log(g.next()); // { value: 2, done: false }
结合生成器可以轻松实现惰性求值、无限序列等高级功能。
function* idGenerator() { let id = 1; while (true) { yield id++; }}const ids = idGenerator();console.log(ids.next().value); // 1console.log(ids.next().value); // 2
基本上就这些。掌握迭代器模式有助于理解现代 JavaScript 的遍历机制，也能写出更通用、可复用的数据处理逻辑。不复杂但容易忽略。
以上就是JavaScript迭代器模式_javascript遍历方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1539669.html
微信扫一扫 
支付宝扫一扫 
