JavaScript中Iterator是统一遍历协议，for...of基于它工作；原生支持的有Array、String、Map、Set、TypedArray、arguments、NodeList等；手动实现需提供[Symbol.iterator]()方法并返回含next()的迭代器对象。
JavaScript 中的 Iterator 是一种统一的数据遍历协议，for...of 循环正是基于这个协议工作的——它会自动调用目标对象的 [Symbol.iterator]() 方法获取迭代器，然后反复调用 next() 直到返回 { done: true }。
哪些数据结构原生支持 for...of？
以下内置类型默认实现了迭代器协议，可直接用于 for...of：
- Array：按索引顺序遍历元素
- String：按 Unicode 码点遍历字符（正确处理 emoji 和代理对）
-
Map：遍历
[key, value]键值对数组 - Set：遍历唯一值
-
TypedArray（如
Uint8Array）、arguments、NodeList 等类数组对象
手动实现一个可迭代对象
只要对象有 [Symbol.iterator] 方法，且该方法返回一个符合迭代器协议的对象（即具有 next() 方法，返回 { value, done } 形式的对象），就能被 for...of 使用。
例如，实现一个从 start 到 end 的数字范围迭代器：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
class Range {
constructor(start, end) {
this.start = start;
this.end = end;
}
[Symbol.iterator]() {
let current = this.start;
return {
next() {
if (current <= this.end) {
return { value: current++, done: false };
}
return { done: true };
}.bind(this) // 注意绑定 this
};
}
}
<p>for (const num of new Range(2, 4)) {
console.log(num); // 2, 3, 4
}for...of 与其它循环的区别
对比常见遍历方式，更能看清 for...of 的定位：
- for...in：遍历对象的可枚举属性名（包括原型链），不适用于数组（顺序不确定，还可能遍历到非数字属性）
-
forEach：是数组方法，无法中断（无
break/continue），也不支持异步等待 -
for...of：支持
break、continue、return；可配合await（在 async 函数中）；只关心“可迭代”本身，不依赖具体类型
扩展已有对象的迭代行为
可以给自定义对象或现有对象（不推荐改写原生原型）添加 [Symbol.iterator]，使其支持 for...of。
比如让普通对象按属性值遍历：
const obj = { a: 1, b: 2, c: 3 };
obj[Symbol.iterator] = function* () {
for (const key in this) {
if (this.hasOwnProperty(key)) {
yield this[key];
}
}
};
<p>for (const val of obj) {
console.log(val); // 1, 2, 3
}注意：这里用了生成器函数（function*），它天然返回一个符合迭代器协议的对象，写法更简洁安全。
