ECMAScript中的对象迭代：`Object.entries()`与`Object.values()`方法解析

在ECMAScript 2017（ES8）中，Object.entries()和Object.values()方法为JavaScript对象提供了新的迭代方式。这两种方法都用于遍历对象的属性，但它们返回的数据结构和使用场景有所不同。本文将详细探讨这两个方法的区别，并提供代码示例来加深理解。

Object.entries()方法

Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其结果是一个二维数组，每个子数组包含两个元素：键和对应的值。

特点：

• 返回键值对数组。
• 每个子数组包含键和值。

示例代码：

const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj);

console.log(entries);
// 输出：[ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ]

Object.values()方法

Object.values()方法返回一个给定对象自身可枚举属性的值数组。

特点：

• 仅返回值的数组。
• 不包含键信息。

示例代码：

const values = Object.values(obj);

console.log(values);
// 输出：[ 1, 2, 3 ]

主要区别

1. 返回的数据结构：Object.entries()返回键值对数组，而Object.values()仅返回值的数组。
2. 使用场景：当你需要遍历对象的键和值时，使用Object.entries()；当你只需要遍历对象的值时，使用Object.values()。
3. 性能：在某些情况下，如果你只需要对象的值，使用Object.values()可能会比Object.entries()更高效，因为它不需要存储键信息。

应用示例

假设我们需要对对象的每个键值对执行操作：

for (const [key, value] of Object.entries(obj)) {
    console.log(`键：${key}, 值：${value}`);
}
// 输出：
// 键：a, 值：1
// 键：b, 值：2
// 键：c, 值：3

如果只需要遍历对象的值，并对每个值执行操作：

for (const value of Object.values(obj)) {
    console.log(`值：${value}`);
}
// 输出：
// 值：1
// 值：2
// 值：3

结论

Object.entries()和Object.values()提供了灵活的方式来遍历JavaScript对象的属性。选择使用哪个方法取决于你的具体需求：是否需要访问对象的键。理解这两种方法的工作原理和适用场景，可以帮助开发者编写出更加清晰和高效的代码。