JavaScript迭代器是什么？for...of循环原理

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《JavaScript迭代器是什么？for...of如何运行？》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

JavaScript迭代器是拥有next()方法的对象，返回{value, done}；for...of通过Symbol.iterator协议遍历，要求对象提供返回有效迭代器的方法，普通对象默认不支持。

JavaScript 迭代器是一个具有 next() 方法的对象，每次调用都返回形如 { value, done } 的结果。其中 value 是当前迭代值，done 是布尔值，为 true 表示遍历结束。它本身不决定“怎么遍历”，只提供“按需取值”的能力。

for...of 循环依赖 Symbol.iterator 接口

for...of 不是靠对象类型判断能否遍历，而是检查对象是否实现了可迭代协议——即是否存在 [Symbol.iterator] 方法，且该方法返回一个有效的迭代器对象。

• 数组、字符串、Set、Map、TypedArray、arguments 等原生类型默认有 [Symbol.iterator]
• 普通对象（如 {a:1, b:2}）默认没有，所以直接 for...of 会报错
• 你可以手动添加 [Symbol.iterator] 让任意对象支持 for...of

for...of 的实际执行过程

当你写 for (const x of iterable) { ... }，JS 引擎内部做了三件事：

• 调用 iterable[Symbol.iterator]() 获取迭代器
• 反复调用该迭代器的 next() 方法，直到 done: true
• 每次把 next().value 赋给循环变量 x，再执行循环体

这和手写迭代逻辑等价：

const iterator = arr[Symbol.iterator]();
let result = iterator.next();
while (!result.done) {
  console.log(result.value);
  result = iterator.next();
}

常见误区与注意事项

• for...in 遍历的是对象的**可枚举属性键名**（包括原型链上的），而 for...of 遍历的是**可迭代对象的值**，二者目标完全不同
• 数组用 for...in 会拿到索引字符串（如 "0"），用 for...of 拿到的是元素值（如 42）
• 想让普通对象被 for...of 遍历，必须自己实现 [Symbol.iterator]，通常返回 Object.entries(obj) 的迭代器即可

基本上就这些。理解迭代器本质是“可控的逐个取值”，for...of 只是它的语法糖，不复杂但容易忽略底层契约。

本篇关于《JavaScript迭代器是什么？for...of循环原理》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！