JavaScript（JS）中怎么遍历对象？一文讲解 JS 遍历对象的方法

在 JavaScript 中，对象是一种非常重要的数据结构，要访问和处理对象中的属性和方法，我们需要能够遍历对象。本文将介绍在 JavaScript 中遍历对象的几种常见方法。

javascript js 中遍历对象 Object 的方法 — MDN 的 javascript 文档

JavaScript 中遍历对象的基本概念

遍历对象就是访问对象中的每一个属性，对属性进行读取或操作。常见的遍历对象的场景包括:

打印出对象的所有属性名和值
查找对象中是否存在某个属性
对对象的属性进行修改或删除遍历对象可以让我们更好地访问和利用对象中的数据。

JavaScript 中的对象遍历方法

在 JavaScript 中，有几种常用的方法来遍历对象。下面将介绍这些方法，并提供详细的解释和示例代码。

1.for...in 循环

for...in 循环可以用来遍历对象的可枚举属性，包括原型链上的属性。它将遍历对象的所有键，并允许你访问对应的值。

const person = {
  name: 'Alice',
  age: 30,
  job: 'Engineer'
};

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

2.Object.keys() 方法

Object.keys() 方法返回一个包含对象自身可枚举属性名称的数组。你可以遍历这个数组来访问对象的属性和值。

const person = {
  name: 'Bob',
  age: 25,
  job: 'Designer'
};

const keys = Object.keys(person);
keys.forEach(key => {
  console.log(`${key}: ${person[key]}`);
});

3.Object.values() 方法

Object.values() 方法返回一个包含对象自身可枚举属性值的数组。你可以遍历这个数组来访问对象的值。

const person = {
  name: 'Charlie',
  age: 28,
  job: 'Artist'
};

const values = Object.values(person);
values.forEach(value => {
  console.log(value);
});

4.Object.entries() 方法

Object.entries() 方法返回一个包含对象自身可枚举属性键值对的数组。每个键值对都以数组形式表示，第一个元素是属性名，第二个元素是属性值。

const person = {
  name: 'David',
  age: 22,
  job: 'Writer'
};

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

实践案例：遍历对象并查找特定属性

假设我们有一个存储用户信息的对象，现在我们想要遍历该对象并查找年龄大于等于 30 的用户。我们可以使用上述介绍的方法来实现这个目标。

const users = {
  alice: { name: 'Alice', age: 28 },
  bob: { name: 'Bob', age: 32 },
  charlie: { name: 'Charlie', age: 24 }
};

// 使用 for...in 循环
for (const username in users) {
  const user = users[username];
  if (user.age >= 30) {
    console.log(`${user.name} is ${user.age} years old.`);
  }
}

javascript 中对象 Object 的遍历 — javascript 中遍历对象的实例

互动练习：遍历对象并计算属性总数

练习： 给定一个对象 data，编写代码遍历该对象并计算它包含的属性总数。

const data = {
  name: 'John',
  age: 25,
  city: 'New York',
  job: 'Developer'
};

// 你的代码

// 参考答案
const propertyCount = Object.keys(data).length;
console.log(`The object contains ${propertyCount} properties.`);

提示、技巧和注意事项

在使用 for...in 循环遍历对象时，要注意它会遍历对象的原型链上的属性。可以使用 hasOwnProperty() 方法来判断属性是否是对象自身的属性。
如果只需要遍历对象的值而不关心属性名，可以使用 Object.values() 方法。
使用 Object.entries() 可以同时访问属性名和属性值，适用于需要同时处理键和值的场景。

通过 Apifox 调试后端接口

Apifox 是一个比 Postman 更强大的接口测试工具，Apifox = Postman + Swagger + Mock + JMeter，Apifox 支持调试 http(s)、WebSocket、Socket、gRPC、Dubbo 等协议的接口，并且集成了 IDEA 插件。在后端人员写完服务接口时，测试阶段可以通过 Apifox 来校验接口的正确性，图形化界面极大的方便了项目的上线效率。

立即体验 Apifox

总结

遍历对象在 JavaScript 编程中是一个常见的任务，通过使用 for...in 循环、Object.keys()、Object.values() 和 Object.entries() 方法，我们可以轻松地遍历对象的属性和值。根据具体的需求，选择合适的遍历方法能够更高效地处理对象数据。

知识扩展：

参考链接：

MDN Web Docs - Iterating through object properties：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects/Iterating_through_object_properties
5 Methods of Creating Objects in JavaScript:https://jsnoteclub.com/blog/5-methods-of-creating-objects-in-javascript/
JavaScript.info - Object methods：https://javascript.info/keys-values-entries