迭代器是javascript中通过next()方法访问集合元素的设计模式，返回包含value和done的对象；for循环适用于索引操作，for...of遍历可迭代对象的值，foreach执行回调但不可中断，map生成新数组，for...in用于对象属性遍历，object.keys结合foreach可枚举自身属性；实现symbol.iterator可使对象可迭代，内置可迭代类型包括array、string、map、set等，支持for...of和扩展运算符。
JavaScript 中的迭代器和遍历方法是处理数据集合的核心机制。理解它们能帮助你更高效地操作数组、对象和其他可迭代结构。
什么是迭代器（Iterator）
迭代器是一种设计模式，允许你访问集合中的元素而无需暴露其底层结构。在 JavaScript 中，一个迭代器是一个对象，它实现了 next() 方法，返回包含 value 和 done 两个属性的对象。
当 done 为 true 时，表示遍历结束；否则继续通过 value 获取当前值。
你可以手动创建一个迭代器：
立即学习“Java免费学习笔记（深入）”；
const arr = [1, 2, 3];
const iterator = arr[Symbol.iterator]();
<p>iterator.next(); // { value: 1, done: false }
iterator.next(); // { value: 2, done: false }
iterator.next(); // { value: 3, done: false }
iterator.next(); // { value: undefined, done: true }
常见的遍历方法
JavaScript 提供了多种方式来遍历数组或类数组结构，每种方法适用不同场景。
1. for 循环 — 最基础的方式，适合需要索引的操作。
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
2. for...of 循环 — 遍历可迭代对象（如数组、字符串、Map、Set），直接获取值。
for (const item of arr) {
console.log(item);
}
3. forEach() — 数组方法，执行回调函数对每个元素进行操作，不能中断（return 不会跳出循环）。
arr.forEach(item => {
console.log(item);
});
4. map() — 创建一个新数组，结果是原数组每个元素调用函数后的返回值。
const doubled = arr.map(x => x * 2);
5. for...in — 主要用于遍历对象的可枚举属性，不推荐用于数组（因为可能遍历到意外的属性）。
const obj = { a: 1, b: 2 };
for (const key in obj) {
console.log(key, obj[key]);
}
6. Object.keys() + forEach — 遍历对象的所有自身可枚举属性键。
Object.keys(obj).forEach(key => {
console.log(key, obj[key]);
});
可迭代协议与自定义对象遍历
任何对象只要实现 [Symbol.iterator] 方法，就可以被 for...of 或扩展运算符使用。
例如，让一个普通对象支持遍历：
const myIterable = {
data: ['a', 'b', 'c'],
[Symbol.iterator]() {
let index = 0;
return {
next: () => {
if (index < this.data.length) {
return { value: this.data[index++], done: false };
}
return { done: true };
}
};
}
};
<p>for (const item of myIterable) {
console.log(item); // 输出 a, b, c
}
哪些类型默认可迭代？
以下内置类型实现了可迭代协议：
- Array
- String
- Map
- Set
- arguments 对象
- NodeList 等 DOM 集合（部分环境）
这意味着它们都能用 for...of、... 扩展、Array.from() 等方式处理。
基本上就这些。掌握迭代器原理和各种遍历方法的区别，能让你写出更清晰、高效的代码。
