JS Object遍历|极客笔记

JS Object遍历

在JavaScript中，对象（Object）是一种存储键值对的数据结构。对象可以容纳多个键值对，而每个键值对都由键（key）和值（value）组成。在实际开发中，经常需要遍历对象以访问其中的键和值。本文将详细介绍在JavaScript中如何遍历对象。

1. for…in循环

在JavaScript中，可以使用for…in循环来遍历对象中的所有属性。下面是一个简单的示例：

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

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

在上面的代码中，我们定义了一个名为person的对象，其中包含了name、age和gender三个属性。然后使用for…in循环遍历该对象，通过key访问属性名，通过person[key]访问属性值。运行上面的代码，将会输出以下结果：

name: Alice
age: 25
gender: female

需要注意的是，for…in循环不仅会遍历对象自身的属性，还会遍历对象继承的属性。因此，在使用for…in循环时，有时需要使用hasOwnProperty()方法来检查属性是否为对象自身的属性，例如：

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

2. Object.keys()

Object.keys()方法返回一个包含对象所有可枚举属性的数组。通过该方法，可以获取对象的所有属性名，然后通过遍历数组来访问属性值。下面是一个示例：

let person = {
  name: 'Bob',
  age: 30,
  gender: 'male'
};

let keys = Object.keys(person);

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

运行上述代码，将会输出如下结果：

name: Bob
age: 30
gender: male

3. Object.values()

Object.values()方法返回一个包含对象所有可枚举属性值的数组。通过该方法，可以直接获取对象的所有属性值。下面是一个示例：

let person = {
  name: 'Eve',
  age: 35,
  gender: 'female'
};

let values = Object.values(person);

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

运行上述代码，将会输出如下结果：

Eve
35
female

4. Object.entries()

Object.entries()方法返回一个包含对象所有可枚举属性键值对的数组。通过该方法，可以同时获取对象的属性名和属性值。下面是一个示例：

let person = {
  name: 'Grace',
  age: 40,
  gender: 'female'
};

let entries = Object.entries(person);

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

运行上述代码，将会输出如下结果：

name: Grace
age: 40
gender: female

5. 使用ES6的解构赋值

在遍历对象时，可以结合ES6的解构赋值语法来简化操作。例如，通过解构赋值将每个属性名和属性值都单独提取出来，以便于使用。下面是一个示例：

let person = {
  name: 'Hank',
  age: 45,
  gender: 'male'
};

for (let [key, value] of Object.entries(person)) {
  console.log(` ${key}:$ {value}`);
}

上述代码中使用了解构赋值将键值对分别赋值给key和value，从而直接输出属性名和属性值。