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 */ }正确做法是先转成可迭代结构：
立即学习“Java免费学习笔记（深入）”；
-
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 响应式对象）大量使用该特性隐藏内部属性 —— 这意味着你以为跳过了原型属性，其实还可能漏掉本该看到的自有属性。
