JavaScript 如何遍历对象|极客笔记

JavaScript 如何遍历对象

在 JavaScript 中，对象是一种非常常见的数据类型，它可以用来存储各种各样的数据。遍历对象指的是循环访问对象的属性或键值对，以便对对象进行操作或处理。在本文中，我们将详细讨论如何使用不同的方法来遍历对象并获取对象的属性或键值对。

1. 使用 for…in 循环遍历对象

使用 for…in 循环是最常见和最简单的方法来遍历对象。该循环会遍历对象的所有可枚举属性并返回它们的键名。以下是一个简单的示例：

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

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

输出：

name: Alice
age: 30
gender: female

在这个示例中，我们使用 for…in 循环遍历了 person 对象，并打印了每个属性的键和值。

需要注意的是，使用 for…in 循环遍历对象时，会遍历对象的所有可枚举属性，包括从原型链继承的属性。因此，可能需要使用 hasOwnProperty() 方法来检查属性是否属于对象本身。

2. 使用 Object.keys() 方法遍历对象

除了 for…in 循环外，我们还可以使用 Object.keys() 方法来获取对象的所有可枚举属性，并以数组的形式返回键名。以下是一个示例：

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

let keys = Object.keys(person);

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

输出与上面相同：

name: Alice
age: 30
gender: female

在这个示例中，我们首先使用 Object.keys() 方法获取了 person 对象的所有属性键名，然后使用 forEach() 方法遍历这些键，并打印每个属性的键和值。

3. 使用 Object.values() 方法遍历对象的值

类似于 Object.keys() 方法，我们还可以使用 Object.values() 方法来获取对象的所有属性值，并以数组的形式返回这些值。以下是一个示例：

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

let values = Object.values(person);

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

输出：

Alice
30
female

在这个示例中，我们使用 Object.values() 方法获取了 person 对象的所有属性值，并使用 forEach() 方法遍历这些值并打印出来。

4. 使用 Object.entries() 方法遍历对象的键值对

Object.entries() 方法返回一个包含对象自身可枚举属性 [key, value] 对的数组。我们可以使用该方法来遍历对象的键值对。以下是一个示例：

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

let entries = Object.entries(person);

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

输出与前面几个示例相同：

name: Alice
age: 30
gender: female

在这个示例中，我们使用 Object.entries() 方法获取了 person 对象的所有属性键值对，并使用 forEach() 方法遍历这些键值对并打印出来。

5. 使用 Object.getOwnPropertyNames() 方法和 Object.getOwnPropertySymbols() 方法

除了以上介绍的方法外，还有两个方法可以获取对象的属性键。Object.getOwnPropertyNames() 方法可以获取对象的所有自身属性的属性名，包括不可枚举属性，Object.getOwnPropertySymbols() 方法可以获取对象的所有自身 Symbol 类型的属性键。以下是一个示例：

let person = {
  name: 'Alice',
  age: 30
};

Object.defineProperty(person, 'gender', {
  value: 'female',
  enumerable: false
});
let symbol = Symbol('id');
person[symbol] = '12345';

let names = Object.getOwnPropertyNames(person);
let symbols = Object.getOwnPropertySymbols(person);

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

symbols.forEach(symbol => {
  console.log(symbol.toString() + ': ' + person[symbol]);
});

输出：

name: Alice
age: 30
Symbol(id): 12345

在这个示例中，我们使用 Object.getOwnPropertyNames() 方法获取了 person 对象的所有属性名，包括不可枚举属性 gender。同时，使用 Object.getOwnPropertySymbols() 方法获取了 person 对象的 Symbol 类型属性键，并打印出对应的属性值。