【JavaScript】详解 Object.values()、map.values()、Object.entries() 和 map.entries() 及其灵活用法

在 JavaScript 中，处理对象或 Map 的键值对操作是日常开发的重要组成部分。无论是获取值还是键值对，Object.values()、map.values()、Object.entries() 和 map.entries() 都是常见的工具。本文将深入介绍它们的区别、特点以及解构赋值 _ 的高效使用方式，帮助开发者编写更简洁、优雅的代码。

一、Object.values() 与 map.values()

1. Object.values()

Object.values() 是 JavaScript 内置方法，用于返回一个数组，其中包含普通对象所有可枚举自有属性的值。它的使用非常直观，特别适合提取对象的值以便后续操作。

示例：

const obj = { a: 1, b: 2, c: 3 };
console.log(Object.values(obj)); 
// 输出：[1, 2, 3]

2. map.values()

map.values() 是 Map 对象的一个方法，用于返回一个迭代器，包含 Map 中所有值。它更适合处理 Map 数据结构，尤其在需要按插入顺序访问值时。

示例：

const map = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3],
]);

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

核心区别

特性	Object.values()	map.values()
适用数据结构	普通对象	Map
返回值类型	数组	迭代器（可转为数组）
键值顺序	对象属性的枚举顺序	Map 的插入顺序
用法简洁性	适合直接操作数组	可结合 for...of 迭代使用

---

二、Object.entries() 与 map.entries()

1. Object.entries()

Object.entries() 返回一个二维数组，每个元素是对象的键值对 [key, value]。它提供了更全面的键值对访问能力，特别适合需要同时处理键和值的场景。

示例：

const obj = { a: 1, b: 2, c: 3 };
console.log(Object.entries(obj)); 
// 输出：[ ['a', 1], ['b', 2], ['c', 3] ]

结合解构赋值，可以同时提取键和值：

Object.entries(obj).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});
// 输出：
// a: 1
// b: 2
// c: 3

2. map.entries()

map.entries() 返回一个 MapIterator，其中每一项是一个键值对 [key, value]。它非常适合用在 Map 的键值对操作中，并支持按插入顺序迭代。

示例：

const map = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3],
]);

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

核心区别

特性	Object.entries()	map.entries()
适用数据结构	普通对象	Map
返回值类型	二维数组	迭代器（MapIterator）
用法灵活性	数组操作友好	配合 for...of 使用方便

---

三、灵活运用 _ 忽略键或值

在实际开发中，可能有些场景我们只需要值而不关心键，此时可以结合解构赋值中的占位符 _，清晰地表达“键被忽略”的意图。

忽略键，只处理值

const map = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3],
]);

for (const [_, value] of map.entries()) {
  console.log(value);
}
// 输出：
// 1
// 2
// 3

这种写法不仅简洁，而且在语义上明确表示当前只关注值。如果后续需要使用键，只需将 _ 替换为有意义的变量名即可。

忽略值，只处理键

类似地，也可以忽略值，只处理键：

for (const [key, _] of map.entries()) {
  console.log(key);
}
// 输出：
// a
// b
// c

---

四、不能混用的场景

Object.values() 和 map.values() 的局限性

Object.values() 不能处理 Map 对象：

const map = new Map([
  ['a', 1],
  ['b', 2],
]);

console.log(Object.values(map)); 
// 输出：[]

map.values() 不能直接处理普通对象：

const obj = { a: 1, b: 2 };

console.log(obj.values); 
// 输出：undefined

Object.entries() 和 map.entries() 的局限性

类似地，Object.entries() 不能用于 Map，而 map.entries() 不能用于普通对象。

---

五、实际应用场景与转换方法

对象与 Map 的互相转换

如果需要在普通对象和 Map 之间切换，可以使用 Object.entries() 和 Object.fromEntries()：

对象转为 Map：

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

console.log(map); 
// 输出：Map(3) { 'a' => 1, 'b' => 2, 'c' => 3 }

Map 转为对象：

const map = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3],
]);
const obj = Object.fromEntries(map);

console.log(obj); 
// 输出：{ a: 1, b: 2, c: 3 }

---

六、总结

特性	Object.values()	map.values()	Object.entries()	map.entries()
适用数据结构	普通对象	Map	普通对象	Map
返回值类型	数组	迭代器（可转为数组）	二维数组	迭代器（MapIterator）
迭代方式支持	适合数组操作	支持 for...of	适合数组操作	支持 for...of
灵活性	简单操作值	操作 Map 数据更强	键值对操作友好	键值对操作友好

在实际开发中，选择适合的方法取决于数据结构和具体需求。

推荐：

• JavaScript
• react
• vue

---