JavaScript遍历对象的方式：从浅入深掌握5种方法

2023-12-14 06:51:43

在JavaScript开发中，遍历对象是一个常见的操作，它允许我们访问和修改对象中的键值对。掌握不同的遍历方法对于高效且灵活地处理对象数据至关重要。本文将深入探讨JavaScript中遍历对象的5种主要方式，并提供详细的示例和最佳实践指南。

1. for...in 循环

const obj = { name: 'John', age: 30 };

for (let key in obj) {
  console.log(key); // 输出：name, age
  console.log(obj[key]); // 输出：John, 30
}

优点：

可以遍历对象的所有属性，包括原型链中的可枚举属性。
简单易用，不需要考虑属性类型。

缺点：

无法遍历Symbol类型属性。
遍历顺序不可控，可能受到原型链影响。
不适用于数组，因为它将遍历数组索引。

2. for...of 循环

const obj = { name: 'John', age: 30 };

for (let value of Object.values(obj)) {
  console.log(value); // 输出：John, 30
}

优点：

遍历对象自身的可枚举属性，不包括原型链。
适用于任何类型的值。

缺点：

无法遍历键。
遍历顺序不可控。
不适用于数组，因为它将遍历数组元素。

3. Object.keys()

const obj = { name: 'John', age: 30 };

const keys = Object.keys(obj); // ["name", "age"]

keys.forEach((key) => {
  console.log(key); // 输出：name, age
});

优点：

仅遍历对象自身的键。
返回一个数组，便于使用forEach或其他数组方法。

缺点：

无法遍历值。
遍历顺序不可控。

4. Object.values()

const obj = { name: 'John', age: 30 };

const values = Object.values(obj); // ["John", 30]

values.forEach((value) => {
  console.log(value); // 输出：John, 30
});

优点：

仅遍历对象自身的非Symbol类型值。
返回一个数组，便于使用forEach或其他数组方法。

缺点：

无法遍历键。
遍历顺序不可控。

5. Object.entries()

const obj = { name: 'John', age: 30 };

const entries = Object.entries(obj); // [["name", "John"], ["age", 30]]

entries.forEach((entry) => {
  console.log(entry[0]); // 输出：name, age
  console.log(entry[1]); // 输出：John, 30
});