JS 遍历 Object

JS 遍历 Object

在 JavaScript 中，Object 是一种复杂的数据类型，可以用来存储多个键值对。在实际开发中，我们经常需要遍历 Object 中的属性，以便对其进行操作和处理。本文将详细介绍如何遍历 Object，并举例说明常见的遍历方法。

1. for…in 循环

for…in 循环是最常用的遍历 Object 的方法之一。它可以用来遍历Object中的所有可枚举属性。示例如下：

const person = {
  name: 'Alice',
  age: 30,
  gender: 'female'
};

for (let key in person) {
  console.log(key + ': ' + person[key]);
}

运行结果：

name: Alice
age: 30
gender: female

在上面的示例中，我们定义了一个名为 person 的 Object，并使用 for...in 循环遍历了它的所有属性。循环中使用 key 变量来获取属性名，然后通过 person[key] 来获取相应的属性值。

需要注意的是，for...in 循环会遍历 Object 的所有可枚举属性，包括原型链上的属性。如果只想遍历对象自身的属性，可以通过 hasOwnProperty 方法进行判断，示例如下：

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

2. Object.keys()

Object.keys() 方法返回一个由 Object 中的可枚举属性组成的数组，可以方便地遍历 Object 中的属性。示例如下：

const person = {
  name: 'Alice',
  age: 30,
  gender: 'female'
};

const keys = Object.keys(person);

keys.forEach(key => {
  console.log(key + ': ' + person[key]);
});

运行结果：

name: Alice
age: 30
gender: female

在上面的示例中，我们使用 Object.keys() 方法获取了 person Object 中的所有属性名，并通过 forEach 方法遍历了这些属性。

3. Object.values()

Object.values() 方法返回一个由 Object 中的可枚举属性值组成的数组，可以方便地遍历 Object 中的属性值。示例如下：

const person = {
  name: 'Alice',
  age: 30,
  gender: 'female'
};

const values = Object.values(person);

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

运行结果：

Alice
30
female

在上面的示例中，我们使用 Object.values() 方法获取了 person Object 中的所有属性值，并通过 forEach 方法遪历了这些属性值。

4. Object.entries()

Object.entries() 方法返回一个由 Object 中的可枚举属性键值对组成的数组，可以方便地遍历 Object 中的键值对。示例如下：

const person = {
  name: 'Alice',
  age: 30,
  gender: 'female'
};

const entries = Object.entries(person);

entries.forEach(([key, value]) => {
  console.log(key + ': ' + value);
});

运行结果：

name: Alice
age: 30
gender: female

在上面的示例中，我们使用 Object.entries() 方法获取了 person Object 中的所有键值对，并通过 forEach 方法遍历了这些键值对。

总结

本文介绍了几种常见的遍历 Object 的方法，包括 for...in 循环、Object.keys()、Object.values() 和 Object.entries() 方法。每种方法都有其适用的场景，可以根据实际需求选择合适的遍历方法。在使用 for...in 循环时，需要注意原型链上的属性，可以通过 hasOwnProperty 方法进行判断。