JS Map支持哪些类型的键

图 0：JavaScript Map 键类型总览（支持全类型原始值与引用对象）

在 JavaScript 中，Map 对象明确支持任何类型的键。无论是基础的原始类型（字符串、数值、布尔值、Symbol、BigInt、null、undefined），还是复杂的引用类型（普通对象、数组、函数、DOM 节点甚至是自定义类的实例），都可以直接作为 Map 的键来存储和查询关联数据。

这一特质与传统的普通 JavaScript 对象（Object）形成了根本区别。普通对象仅允许字符串或 Symbol 作为键名，其他类型传入时均会被强制转换为字符串；而 Map 则完好保留键的原始类型与引用标识。本文将详细拆解各类键在 Map 中的具体表现、键的比对判定规则以及实际开发中的典型应用与注意事项。

一、原始类型作为键：按值存储与精准匹配

所有 7 种 JavaScript 原始类型（Primitive Types）均可作为 Map 的有效键。原始类型在比对时依据的是其字面值的相等性，只要值相同，就能准确获取到对应的数据。

1. 字符串与数值（区分类型，互不混淆）

在普通对象中，obj[1] 和 obj["1"] 访问的是同一个属性，因为数值 1 会被隐式转换为字符串 "1"。而在 Map 中，数值 1 与字符串 "1" 是两个完全独立的键。

const map = new Map();

// 存储数值键与字符串键
map.set(1, "数值一号数据");
map.set("1", "字符串一号数据");

console.log(map.get(1));   // 输出: "数值一号数据"
console.log(map.get("1")); // 输出: "字符串一号数据"
console.log(map.size);     // 输出: 2（各自独立保存）

2. 布尔值与 BigInt

布尔值 true / false 以及大整数 BigInt 也能直接作为键，同样保持类型纯净，不会发生 "true" 字符串覆盖。

map.set(true, "状态为真");
map.set("true", "字符串 true");
map.set(100n, "大整数 100n");

console.log(map.get(true)); // 输出: "状态为真"
console.log(map.get(100n)); // 输出: "大整数 100n"

3. Symbol 键

Symbol 具备天然的唯一性，用作 Map 的键时非常适合作为私有标记或防冲突索引。

const symA = Symbol("flag");
const symB = Symbol("flag");

map.set(symA, "Symbol A 的专属值");
map.set(symB, "Symbol B 的专属值");

console.log(map.get(symA)); // 输出: "Symbol A 的专属值"
console.log(map.get(symB)); // 输出: "Symbol B 的专属值"（描述符虽同，实例不同，互不影响）

4. null 与 undefined

null 和 undefined 也可以直接作为独立的键存入 Map，二者不会混淆。

map.set(null, "空对象指针空位");
map.set(undefined, "未定义初始值");

console.log(map.get(null));      // 输出: "空对象指针空位"
console.log(map.get(undefined)); // 输出: "未定义初始值"

图 1：普通 Object 键名强制转换与 Map 保持原始类型机制对比

二、引用类型作为键：按内存引用标识匹配

Map 真正强大之处，在于它允许将引用类型（Objects）直接作为键使用。这包括：

• 普通对象：例如 { id: 101 } 或实体配置对象；
• 数组：例如数据元组 [x, y]；
• 函数与方法：例如事件处理函数 handleClick；
• DOM 节点：例如页面上的 <button>、<div> 元素；
• 内置对象实例：例如 Date、RegExp 或第三方库类实例。

1. 对象与数组作为键的典型用法

const userCache = new Map();

// 创建两个独立的引用
const userAlice = { id: 1, name: "Alice" };
const userBob   = { id: 2, name: "Bob" };

// 将对象本身作为键存储额外信息（如权限或会话）
userCache.set(userAlice, { role: "admin", loginCount: 12 });
userCache.set(userBob,   { role: "editor", loginCount: 3 });

// 通过引用精确提取
console.log(userCache.get(userAlice).role); // 输出: "admin"

2. DOM 节点绑定数据

在前端界面开发中，过去常常通过 data-* 属性将数据序列化存入 DOM 节点中。而使用 Map，可以直接将真实的 DOM 元素作为键，实现视图与业务元数据的解耦绑定：

const buttonMeta = new Map();

const submitBtn = document.querySelector("#submit-button");
if (submitBtn) {
  buttonMeta.set(submitBtn, { clickCount: 0, lastClicked: Date.now() });

  submitBtn.addEventListener("click", () => {
    const meta = buttonMeta.get(submitBtn);
    meta.clickCount++;
    console.log(`按钮点击次数: ${meta.clickCount}`);
  });
}

图 2：引用类型键的比对流转步骤及常见字面量查询陷阱

三、键的相等性判定法则：SameValueZero 算法

Map 判断两个键是否相等，并非简单使用 ==（宽松相等）或 ===（严格相等），而是采用 ECMAScript 规范定义的 SameValueZero 算法。

SameValueZero 算法与严格相等 === 绝大多数情况下表现一致，但专门针对两个特殊边界值做出了明确规范：

1. NaN 与 NaN：在 Map 中被判定为同一个键

在标准的 JavaScript 比较运算中，NaN === NaN 返回 false。然而在 Map 中，规范明确规定 NaN 等于 NaN。因此，向 Map 多次存入 NaN 键只会发生值覆盖，不会产生重复项。

const nanMap = new Map();

nanMap.set(NaN, "初次设置 NaN");
nanMap.set(Number("abc"), "二次更新 NaN"); // Number("abc") 运算结果也是 NaN

console.log(nanMap.get(NaN)); // 输出: "二次更新 NaN"
console.log(nanMap.size);     // 输出: 1

2. +0 与 -0：在 Map 中被判定为同一个键

虽然 Object.is(+0, -0) 为 false，但在 SameValueZero 规则下，+0 与 -0 被视作同一个键，后设置的值会覆盖先设置的值。

const zeroMap = new Map();

zeroMap.set(+0, "正零");
zeroMap.set(-0, "负零");

console.log(zeroMap.get(0));  // 输出: "负零"
console.log(zeroMap.size);    // 输出: 1

图 3：SameValueZero 键相等性判定的推导决策流程

四、实际使用中的关键陷阱与内存管理

1. 陷阱一：字面量作为对象键无法查询

新手在使用 Map 时最常犯的错误，就是直接在 get 方法中使用字面量对象：

const registry = new Map();

// 错误示范：每次字面量都会生成全新的堆内存对象
registry.set({ role: "vip" }, "VIP权限包");

console.log(registry.get({ role: "vip" })); // 输出: undefined
console.log(registry.has({ role: "vip" })); // 输出: false

正确做法：必须将对象存储在变量中，或者传入已有对象的引用。

2. 陷阱二：强引用导致的内存泄漏风险

Map 对它的键持有强引用（Strong Reference）。只要 Map 实例本身处于可达状态，哪怕你在外部将作为键的对象置为 null，垃圾回收机制（GC）也无法回收该对象占用的内存。

let domElement = document.getElementById("temp-banner");
const cache = new Map();

cache.set(domElement, { createdTime: Date.now() });

// 页面移除了 DOM 节点，外部变量解除引用
domElement.remove();
domElement = null;

// 此时 cache 仍然牢牢持有该 DOM 节点的强引用，导致 DOM 节点及关联元数据无法被垃圾回收！

五、Map、WeakMap 与 Object 键特性综合选型

为了在实际开发中做出准确的技术选型，下表列出了三者在键类型、遍历支持及内存机制上的全面对比：

图 4：JavaScript 集合键特性与开发选型知识图谱

结语

总结来说，JavaScript Map 能够接纳任何类型的值作为键。在处理原始类型时，它按值精确判定并严格区分数据类型（不发生隐式类型转换）；在处理引用类型时，它依靠内存地址指针进行同一性验证。掌握其底层的 SameValueZero 判定法则与强引用特性，并在需要弱引用绑定的场景下合理切换至 WeakMap，就能充分发挥出现代 JavaScript 键值集合的结构表达能力与运行性能。