JS Map怎么只遍历Key或Value

图 1：JavaScript Map 仅遍历键或值的两种核心内置入口

假设你正在处理一个存储用户权限的字典 userId -> userProfile，或者一段带有效期的内存缓存 cacheKey -> cacheData。在实际业务中，经常只需要把所有的用户 ID 收集起来做权限比对，或者把所有缓存数据取出来求和，根本不需要解构完整的 [key, value] 键值对。如果每次都通过 for...of map 解构两个变量，不仅显得代码冗余，也容易带来不必要的命名负担。

在 JavaScript 中，针对 Map 仅遍历 Key 或 Value 的核心解决方案是：直接使用 map.keys() 或 map.values() 方法。它们分别返回一个只包含键或只包含值的内置可迭代对象（MapIterator），配合 for...of 循环可以直接无中间数组开销地遍历；若需要数组操作，也可以通过扩展运算符 [...map.keys()] 或 Array.from() 快速转换。

一、认识 Map 的三种迭代器机制

JavaScript 的 Map 实例在底层按照元素的插入顺序维护键值列表。为了满足不同的遍历需要，标准规范为 Map.prototype 提供了三个迭代器生成方法：

• map.keys()：返回包含当前 Map 中所有 Key 的迭代器对象。
• map.values()：返回包含当前 Map 中所有 Value 的迭代器对象。
• map.entries()：返回包含所有 [Key, Value] 二元数组的迭代器对象（直接遍历 Map 实例 for (const item of map) 默认调用的就是它）。

图 2：Map 的键、值独立提取与默认 entries 机制对比

因此，当你“只想遍历 Key”或“只想遍历 Value”时，完全不需要把整个键值对拉出来再丢弃另一半，直接锁定 map.keys() 或 map.values() 即可。

二、只遍历 Key 的三种实用方案

遍历 Key 的场景通常包括：校验某个键是否存在、收集所有的标识 ID、打印日志字段名等。以下是三种最常见且高效的方式：

1. 最推荐方案：for...of map.keys()

这是最符合直觉且性能最佳的方式。map.keys() 产出的是可迭代对象，for...of 会在每一次循环迭代中流式拉取下一个键，不需要提前在内存中创建一个临时数组，并且天然支持 break、continue 与 return。

// 准备一个示例 Map
const roleMap = new Map([
  ['admin', '系统管理员'],
  ['editor', '内容编辑员'],
  ['guest', '访客用户']
]);

// 仅遍历并打印所有 Key
for (const roleKey of roleMap.keys()) {
  console.log(`当前角色键名: ${roleKey}`);
}

// 示例输出:
// 当前角色键名: admin
// 当前角色键名: editor
// 当前角色键名: guest

2. 需数组转换时：扩展运算符 [...map.keys()] 或 Array.from()

由于 map.keys() 返回的是迭代器而不是真正的数组，因此它没有 .map()、.filter()、.includes() 等数组方法。如果你遍历 Key 的目的是为了做数组变换或排序，可以先将其展开为普通数组：

// 方式 A：扩展运算符展开
const keysArray = [...roleMap.keys()];
console.log(keysArray); 
// 示例输出: ['admin', 'editor', 'guest']

// 方式 B：使用 Array.from()，还可以直接传入映射回调
const upperKeys = Array.from(roleMap.keys(), key => key.toUpperCase());
console.log(upperKeys);
// 示例输出: ['ADMIN', 'EDITOR', 'GUEST']

3. 解构占位法：for (const [key] of map)（了解即可）

直接遍历 Map 时每一项是 [key, value]，在 ES6 解构赋值中，你可以只取第一个位置的值：

for (const [key] of roleMap) {
  console.log(key);
}

这种写法虽然语法合法，但底层每次迭代依然要创建二元数组 [key, value]，在代码可读性与引擎微观性能上均不如 map.keys() 清晰，因此推荐优先使用 map.keys()。

图 3：只遍历 Key 的主流流转步骤与适用场景区分

三、只遍历 Value 的最佳实践与参数细节

只遍历 Value 的场景更加常见，比如统计购物车总价、汇总服务器节点状态、批量触发状态更新等。针对 Value，有两个非常方便的方案：

1. 使用 for...of map.values()

与 keys() 类似，map.values() 提供纯粹的 Value 迭代器：

const scoreMap = new Map([
  ['语文', 92],
  ['数学', 98],
  ['英语', 88]
]);

let totalScore = 0;
// 仅遍历数值进行累加
for (const score of scoreMap.values()) {
  totalScore += score;
}

console.log(`总分: ${totalScore}`);
// 示例输出: 总分: 278

2. 使用 map.forEach() 单参数写法（重要细节）

很多开发者习惯用 forEach 遍历集合，但常常会记混回调参数的顺序。注意：Map.prototype.forEach 回调的第一个参数是 value，第二个参数才是 key！

这个设计与普通数组 Array.prototype.forEach((item, index) => ...) 保持一致（元素内容在前，索引/标识在后）。这意味着，如果你只需要遍历 Value，只需要在回调函数中声明单个形参即可：

// 仅接收第一个参数 value，直接实现只遍历 Value
scoreMap.forEach((score) => {
  console.log(`单科分数: ${score}`);
});

// 示例输出:
// 单科分数: 92
// 单科分数: 98
// 单科分数: 88

图 4：只遍历 Value 时的语法特征与控制流差异

四、容易忽略的细节与常见误区

五、选型决策指南与总结

为了帮助你在实际开发中快速选用恰当的方法，可以参考以下决策路径：

图 5：JS Map 遍历方案综合决策树

掌握 map.keys() 与 map.values()，能够让你的 JavaScript 代码在处理键值映射集合时既语义清晰又兼具优秀的运行效率。