如何在 JavaScript 中遍历对象：5 种方法及示例

如何在 JavaScript 中遍历对象：从新手到专家

每个开发者迟早都会遇到这样一个问题：“如何遍历一个对象的所有属性？”。这个问题非常流行，在 Stack Overflow 上获得了数千次浏览和数百个回答。这并不奇怪——JavaScript 中的对象是一切的基础：从配置到来自服务器的数据。

在本教程中，我们将介绍在 JavaScript 中遍历对象的所有主要方法，从经典方法到现代方法。您将了解何时使用 for...in，Object.keys 好在哪，以及 Object.entries 如何简化生活。开始吧！

准备工作：创建一个测试对象

为了让示例更清晰，我们创建一个简单的用户对象：

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

我们的任务是输出所有键和值。让我们看看 JavaScript 中有哪些工具可用。

1. for...in 循环——经典方法

这是最古老、最基本的遍历对象属性的方法。它出现在 ES3 时代，并在所有浏览器中都能工作。

for (let key in user) {\n  console.log(key + ': ' + user[key]);\n}\n// name: 安娜\n// age: 28\n// city: 莫斯科\n// isAdmin: false

重要细节： for...in 不仅遍历对象自身的属性，还会遍历通过原型链继承的属性。要过滤掉它们，请使用 hasOwnProperty：

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

现代对象很少有多余的原型属性，但养成检查 hasOwnProperty 的习惯可以防止在使用库时出现错误。

2. Object.keys()——现代方法

Object.keys() 方法返回对象自身键的数组。这避免了原型相关的问题，并允许使用所有数组方法。

const keys = Object.keys(user);\nconsole.log(keys); // ['name', 'age', 'city', 'isAdmin']\n\nkeys.forEach(key => {\n  console.log(key + ': ' + user[key]);\n});

优点：

\n
• 仅处理对象自身的属性（非继承的）
\n
• 返回数组——可以使用 forEach、map、filter
\n
• 代码可读性强且可预测
\n

当只需要获取键列表并对其进行操作时，这是我最喜欢的方法。

3. Object.values()——当只需要值时

有时我们只关心属性的值，而不关心键。例如，用于求和或显示数据。

const values = Object.values(user);\nconsole.log(values); // ['安娜', 28, '莫斯科', false]\n\nvalues.forEach(value => {\n  console.log(value);\n});

该方法出现在 ES2017 中，非常适合处理键无关紧要的数据集合。

4. Object.entries()——方法中的王者

Object.entries() 返回一个数组的数组，其中每个内部数组都是一个 [键, 值] 对。这是在 JavaScript 中遍历对象的通用工具。

const entries = Object.entries(user);\nconsole.log(entries);\n// [\n//   ['name', '安娜'],\n//   ['age', 28],\n//   ['city', '莫斯科'],\n//   ['isAdmin', false]\n// ]\n\nentries.forEach(([key, value]) => {\n  console.log(`${key}: ${value}`);\n});

请注意 forEach 参数中的解构：([key, value])。这使代码简洁明了。

何时使用：

\n
• 需要同时获取键和值
\n
• 想要将对象转换为其他结构（例如 Map）
\n
• 编写函数时