遍历：得到数组 or 遍历器？
2023-09-28 06:51:16
深入探讨 JavaScript 中遍历对象的 3 种方法
前言
遍历对象是 JavaScript 编程中的一个基本任务，它能让你访问对象的属性和值，从而对它们进行操作。然而，JavaScript 提供了多种遍历对象的方法，每种方法都会产生不同的结果。为了帮助你理解这些方法之间的差异，本文将深入探讨 Object.keys(), Object.values() 和 Object.entries()，分析它们的优点、缺点和使用场景。
1. 认识 Object.keys()
Object.keys() 方法返回一个数组，其中包含对象的所有可枚举属性名。这些属性名是字符串，代表对象的键。Object.keys() 不会返回属性值，只返回属性名。
优点：
- 高效地检索属性名，因为它不需要计算属性值。
- 返回一个简单、有序的数组，便于处理。
缺点：
- 不会返回属性值，需要额外的步骤来获取值。
- 不适用于不可枚举属性（如 Symbol 键）。
语法：
const keys = Object.keys(object);
示例：
const person = { name: 'John', age: 30 };
const keys = Object.keys(person); // ['name', 'age']
2. 探索 Object.values()
Object.values() 方法返回一个数组，其中包含对象的所有可枚举属性值。这些值可以是任何类型，代表对象的实际数据。
优点：
- 直接返回属性值，无需额外的步骤。
- 适用于任何数据类型的值。
缺点：
- 检索值可能比
Object.keys()慢。 - 返回的数组是无序的，可能难以处理。
语法：
const values = Object.values(object);
示例：
const person = { name: 'John', age: 30 };
const values = Object.values(person); // ['John', 30]
3. 揭示 Object.entries()
Object.entries() 方法返回一个数组，其中包含对象的所有可枚举属性，每个元素都是一个包含键和值的数组。与 Object.keys() 和 Object.values() 不同，Object.entries() 返回一个二元组数组。
优点：
- 同时返回属性名和值。
- 适用于需要同时访问键和值的场景。
- 返回的数组是无序的，但可以根据需要进行排序。
缺点：
- 检索数据可能比
Object.keys()或Object.values()慢。 - 返回的数组是嵌套的，处理起来可能比其他方法复杂。
语法：
const entries = Object.entries(object);
示例：
const person = { name: 'John', age: 30 };
const entries = Object.entries(person); // [['name', 'John'], ['age', 30]]
结论
Object.keys(), Object.values() 和 Object.entries() 都是 JavaScript 中遍历对象的有效方法。选择哪种方法取决于特定的需求。
- 获取属性名： 使用
Object.keys()。 - 获取属性值： 使用
Object.values()。 - 同时获取键和值： 使用
Object.entries()。
通过理解这些方法之间的差异，你可以选择最适合你的应用程序的遍历策略。
常见问题解答
-
哪种方法最快？
Object.keys()通常是最快的，因为不需要计算属性值。 -
哪种方法最容易使用？
Object.keys()和Object.values()返回简单的数组，最容易使用。 -
哪种方法最通用？
Object.entries()最通用，因为它同时返回键和值。 -
不可枚举属性呢？
Object.keys()和Object.values()不返回不可枚举属性，而Object.entries()返回。 -
我可以使用 for...in 循环遍历对象吗？
可以，但 for...in 循环也会返回不可枚举属性，并且遍历顺序是不可预测的。
