javascript迭代器是一种特殊的对象，它为不同的数据结构提供了统一的遍历接口，让开发者可以用一致的方式访问集合中的元素。for...of循环则是基于迭代器实现的遍历语法，能够直接获取集合中的值，避免了传统for循环需要手动维护索引的繁琐操作。
什么是javascript迭代器
迭代器是一个具有next()方法的对象，每次调用next()方法都会返回一个包含value和done两个属性的结果对象。value表示当前遍历到的元素值，done是布尔值，当遍历未完成时为false，遍历结束时为true。
在javascript中，只要一个对象实现了Symbol.iterator方法，就可以被称为可迭代对象。这个Symbol.iterator方法调用后会返回一个迭代器对象，也就是我们说的迭代器。
原生可迭代对象示例
javascript中很多内置对象都是可迭代的，比如数组、字符串、Map、Set等，我们可以直接使用for...of循环遍历它们。
// 数组是可迭代对象
const arr = [1, 2, 3];
// 获取数组的迭代器
const arrIterator = arr[Symbol.iterator]();
console.log(arrIterator.next()); // { value: 1, done: false }
console.log(arrIterator.next()); // { value: 2, done: false }
console.log(arrIterator.next()); // { value: 3, done: false }
console.log(arrIterator.next()); // { value: undefined, done: true }
// 字符串也是可迭代对象
const str = "abc";
const strIterator = str[Symbol.iterator]();
console.log(strIterator.next()); // { value: 'a', done: false }
console.log(strIterator.next()); // { value: 'b', done: false }
console.log(strIterator.next()); // { value: 'c', done: false }
console.log(strIterator.next()); // { value: undefined, done: true }
for...of循环的工作流程
for...of循环是ES6引入的遍历语法，它的底层完全依赖迭代器机制运行，具体工作步骤如下：
- 首先调用被遍历对象（可迭代对象）的
Symbol.iterator方法，获取对应的迭代器对象 - 然后反复调用迭代器对象的
next()方法，获取结果对象 - 每次调用
next()后，将结果对象的value赋值给for...of循环中声明的变量 - 检查结果对象的
done属性，如果为false则继续执行循环体，如果为true则结束循环
for...of循环基础用法
// 遍历数组
const numList = [10, 20, 30];
for (const num of numList) {
console.log(num); // 依次输出 10 20 30
}
// 遍历字符串
const text = "hello";
for (const char of text) {
console.log(char); // 依次输出 h e l l o
}
自定义迭代器实现
如果我们想让自定义的数据结构支持for...of循环，只需要给它添加Symbol.iterator方法，返回一个符合规范的迭代器即可。
自定义范围迭代器示例
下面的代码实现了一个可以生成指定范围数字的迭代器，支持通过for...of循环直接遍历范围里的所有数字。
// 定义范围对象
const range = {
start: 1,
end: 5,
// 实现Symbol.iterator方法
[Symbol.iterator]: function() {
// 保存当前遍历的索引，从start开始
let current = this.start;
const end = this.end;
// 返回迭代器对象
return {
next: function() {
if (current <= end) {
return { value: current++, done: false };
} else {
return { value: undefined, done: true };
}
}
};
}
};
// 使用for...of遍历自定义范围对象
for (const num of range) {
console.log(num); // 依次输出 1 2 3 4 5
}
迭代器与for...of的注意事项
- 普通对象默认不是可迭代对象，因为它们没有实现
Symbol.iterator方法，直接使用for...of遍历会报错 - 迭代器是一次性的，遍历结束后再次调用
next()只会返回{ value: undefined, done: true }，如果需要重新遍历，需要重新获取迭代器 - for...of循环只能遍历可迭代对象，不能遍历普通对象，如果需要遍历对象的属性，可以使用
Object.keys()等方法先转换为数组再遍历
const obj = { a: 1, b: 2 };
// 直接遍历普通对象会报错
// for (const item of obj) { } // TypeError: obj is not iterable
// 正确遍历对象属性的方式
for (const key of Object.keys(obj)) {
console.log(key, obj[key]); // 输出 a 1 b 2
}
javascript迭代器for...ofiteratorSymbol_iterator修改时间：2026-07-03 11:06:14