for...in与for...of区别全解析

学习文章要努力，但是不要急！今天的这篇文章《JavaScript中for...in和for...of区别详解》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

for...in遍历对象可枚举属性名（含继承），for...of需配合Object.keys/values/entries才能遍历普通对象；Map/Set原生支持for...of，for...in对其无效或误读原型方法。

for...in 遍历对象的可枚举属性名（包括继承的），for...of 不能直接遍历普通对象，会报 TypeError: obj is not iterable。

for...in 只能拿到属性名，且会遍历原型链上的可枚举属性

它本质是为遍历“键”设计的，不是为值或顺序保证而生。常见陷阱包括：

• for...in 会访问对象自身 + 原型链上所有 可枚举 属性，比如你给 Object.prototype 添加了可枚举方法，它也会出现
• 遍历顺序不保证：ES2015 后对数字键按升序，但字符串键仍按插入顺序 —— 但这个“插入顺序”在继承时不可控
• 无法直接拿到属性值，必须通过 obj[key] 访问，且可能触发 getter 或产生意外类型转换（比如 key 是 number，obj[key] 却读到字符串索引）

const obj = { a: 1, b: 2 };
Object.prototype.c = 3; // 可枚举
for (const key in obj) {
  console.log(key); // 输出 'a', 'b', 'c'
}

for...of 不能直接用于普通对象，必须配合 Object.keys() / values() / entries()

因为 for...of 要求目标实现了 [Symbol.iterator] 接口，而普通对象默认没有。强行用会立即抛错：

const obj = { a: 1, b: 2 };
for (const item of obj) { /* TypeError */ }

正确做法是先转成可迭代结构：

• for...of + Object.keys(obj) → 遍历键（字符串数组）
• for...of + Object.values(obj) → 遍历值（注意：顺序与 keys() 一致）
• for...of + Object.entries(obj) → 遍历 [key, value] 数组

const obj = { x: 10, y: 20 };
for (const key of Object.keys(obj)) {
  console.log(key); // 'x', 'y'
}
for (const [k, v] of Object.entries(obj)) {
  console.log(k, v); // 'x' 10, 'y' 20
}

Map 和 Set 天然支持 for...of，但 for...in 表现异常

Map 和 Set 是真正的可迭代对象，for...of 是首选；而 for...in 在它们身上几乎无用：

• for...in 遍历 Map 时不会报错，但什么也得不到 —— 因为它的可枚举属性为空（Map 把数据存在内部槽，不暴露为属性）
• for...in 遍历 Set 同样没意义，且可能意外访问到原型方法（如 size、add）
• for...of 则直接、安全、语义清晰：for (const v of myMap.values())，for (const [k, v] of myMap)

const map = new Map([['a', 1], ['b', 2]]);
for (const [k, v] of map) {
  console.log(k, v); // 'a' 1, 'b' 2
}
for (const k in map) {
  console.log(k); // 可能输出 'size', 'set', 'get' 等方法名，取决于环境和 polyfill

真正容易被忽略的是：for...in 的“可枚举性”由 Object.defineProperty 的 enumerable: false 控制，而现代框架（如 Vue 3 响应式对象）大量使用该特性隐藏内部属性 —— 这意味着你以为跳过了原型属性，其实还可能漏掉本该看到的自有属性。

到这里，我们也就讲完了《for...in与for...of区别全解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！