JavaScript 对象迭代：新手完全指南

如何遍历 JavaScript 对象的属性：从新手到专家

每一位使用 JavaScript 的开发者，迟早都会遇到这样一个问题：“如何遍历对象的所有属性？”如果你已经习惯了使用数组的 for、forEach 和 map，那么对象可能会显得有些难以驾驭。但别急着灰心！在本文中，我们将详细讲解 JavaScript 中遍历对象的所有方法——从经典的 for...in 到现代的 Object.keys()、Object.values() 和 Object.entries()。

我们不仅会展示语法。我们还会分析针对特定任务应该选择哪种方法，存在哪些陷阱，以及如何避免因继承属性而踩坑。开始吧！

什么是 JavaScript 对象，为什么需要遍历它？

对象是一个“键：值”对的集合。与元素按索引排序的数组不同，对象中属性的顺序是不保证的（尽管现代引擎会尽量保持顺序）。

假设你有一个包含用户数据的对象：

const user = {\n  name: '安娜',\n  age: 28,\n  city: '莫斯科',\n  isAdmin: false\n};

你需要将所有数据显示在屏幕上、发送到服务器，或者进行一些计算。如果没有遍历，你就得写 user.name、user.age 等等——这既不灵活也不具备可扩展性。如果对象有 50 个属性呢？这时遍历方法就派上用场了。

方法 #1：经典的 for...in

遍历对象属性最古老、最直接的方法是使用 for...in 循环。它是专门为对象设计的。

const user = {\n  name: '安娜',\n  age: 28,\n  city: '莫斯科'\n};\n\nfor (let key in user) {\n  console.log(key + ': ' + user[key]);\n}\n// 输出：\n// name: 安娜\n// age: 28\n// city: 莫斯科

这里 key 是属性名（字符串值），user[key] 是其值。

重要！ for...in 不仅遍历对象自身的属性，还会遍历通过原型链继承的属性。这可能会导致意外结果，特别是当你扩展了内置对象的原型时（虽然不建议这样做，但以防万一）。

为了避免这种情况，请使用 hasOwnProperty 方法：

for (let key in user) {\n  if (user.hasOwnProperty(key)) {\n    console.log(key + ': ' + user[key]);\n  }\n}

现代替代方案是 Object.hasOwn()（ES2022）：

for (let key in user) {\n  if (Object.hasOwn(user, key)) {\n    console.log(key + ': ' + user[key]);\n  }\n}

什么时候使用 for...in？当你需要属性名（键）并且确信不会遇到继承属性时。或者当你处理通过字面量 {} 创建的简单对象时。

方法 #2：Object.keys()——获取键的数组

Object.keys() 方法返回对象自身（非继承）可枚举属性的数组。这是目前最流行、最安全的遍历方式。

const user = {\n  name: '安娜',\n  age: 28,\n  city: '莫斯科'\n};\n\nconst keys = Object.keys(user);\nconsole.log(keys); // ['name', 'age', 'city']\n\n// 现在可以使用 forEach 或 for...of\nkeys.forEach(key => {\n  console.log(key + ': ' + user[key]);\n});

优点：你得到一个普通的数组，可以对它进行任何操作——过滤、映射、排序。

过滤示例：

const filteredKeys = Object.keys(user).filter(key => key !== 'isAdmin');\nfilteredKeys.forEach(key => console.log(user[key]));

什么时候使用 Object.keys()？几乎在所有情况下都适用。