别再乱用 for...in 了，这几个坑踩完才算真正入门

你是不是也遇到过这种尴尬：明明只想遍历自己传入的那个对象，结果控制台里多出来一堆奇怪的方法名？或者在遍历数组时，索引顺序完全乱了套。这时候问题通常都出在你习惯用的 for...in 循环上。很多开发者把它当成万能钥匙，实际上它更像是个需要小心绕行的窄路。

咱们先看看它到底干了什么。当你写下 for (let key in obj) 时，JavaScript 引擎做的事情比想象中更“广”。它不仅会扫描对象自身所有的可枚举属性，还会顺着原型链往上找，把父级对象里的可枚举属性一股脑全捞下来。

举个栗子，你继承了一个内置类型，或者不小心给 Object.prototype 添了新成员（这在老项目中很常见）：

Object.prototype.customProp = 'hidden';
const myObj = { name: '前端小哥' };

for (let key in myObj) {
  console.log(key); 
}
// 输出可能会包含 customProp ！

这时候你会发现 customProp 混进了自己的数据里。如果不加处理，后续业务逻辑很容易因此报错。这就是为什⻘ for...in 常被诟病的原因。

要解决这个“污染”问题，传统做法是在循环体内部加上判断。最经典的是用 hasOwnProperty：

for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    // 只处理属于当前对象的属性
    console.log(key, obj[key]);
  }
}

但这行代码现在也有点老了。ES2022 引入了更安全的方式 Object.hasOwn()，不过为了兼容旧浏览器，更推荐的思路是：干脆别用 for...in 来遍历普通对象。

现代开发中，如果你只需要拿到对象自身的键值对，优先使用 Object.keys() 配合 map 或 forEach，或者直接上 Object.entries()。它们天然就是“自身”的，不关心原型链，代码意图也更清晰。比如想同时拿键和值：

const data = { id: 1, title: '笔记' };

Object.entries(data).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

这样写既避免了原型链陷阱，又利用了现代语法的便利性。

再提一个特别容易被忽略的场景：千万别用 for...in 遍历数组。虽然语法上跑通了，但数组本质上也是对象，它的索引会被当作字符串处理。更重要的是，如果数组中间有稀疏空洞，或者被添加了非数字的属性，for...in 的遍历顺序可能无法保证是你想要的连续顺序。遇到数组，老老实实写 for 循环或者用 .forEach、.map 方法。

总结下来，for...in 并不是废掉的工具，它在特定场景下仍有价值。比如你需要深度克隆一个包含原型链属性的复杂结构时，或者在编写某些框架底层库需要递归查找所有可配置项时，它能帮你一把。但在绝大多数日常业务代码中，明确区分“自身属性”与“继承属性”才是关键。

技术选型没有绝对的对错，只有适不适合。当你能意识到 for...in 背后的原型链机制，并懂得用 Object.keys 或 entries 做替代方案时，你的代码鲁棒性就已经上了一个台阶。少踩坑，多思考数据从哪里来，这才是写出高质量 JS 的秘诀。