在 JavaScript 中，键值对存储和集合去重是再常见不过的需求。很多人习惯用普通对象和数组来解决问题，代码写起来简单直接，但在数据量增长或操作频率提升之后，可能会遇到难以察觉的性能问题。ES6 引入的 Map 和 Set 并不是为了取代对象和数组，而是给特定场景提供了更合适的数据结构。理解它们背后的实现差异，有助于在缓存、去重、事件管理和对象元数据关联等任务中做出更合理的选择。
一、Map 如何避免普通对象在频繁增删时的隐藏类退化
JavaScript 引擎为了加速对象属性访问，会使用隐藏类或形状来缓存属性在内存中的偏移位置。创建一个对象并添加属性时，引擎会生成一个隐藏类，记录属性名到偏移量的映射。当后续再向这个对象动态添加新属性或者删除已有属性时，隐藏类会发生迁移，旧的缓存信息失效。如果这种操作非常频繁，对象结构不断变化，引擎可能放弃形状优化，转而使用字典模式存储属性，访问速度会明显下降。普通对象的键还只能是字符串或 Symbol，数字键会被转换成字符串，这有时会造成不易察觉的类型混淆。
Map 在内部以更接近哈希映射的方式维护键值对，支持任意值作为键，包括数字、对象、函数等。它不会因为增删键值对而频繁改变内部形状，也不会把键强制转换成字符串。对需要动态缓存数据、记录请求状态、存储与业务对象关联的临时信息的场景，Map 通常比把普通对象当字典更稳定。下面是一个简单的临时缓存用法对比：
// 使用普通对象作为临时缓存
const objCache = {};
for (const item of dataList) {
objCache[item.id] = item;
}
delete objCache[expiredId];
// 动态添加和删除会让对象结构不断变化
改用 Map 后，语义更加明确，键类型也不会被隐式转换：
const mapCache = new Map();
for (const item of dataList) {
mapCache.set(item.id, item);
}
mapCache.delete(expiredId);
这里的差异并不只是语法风格不同。假如缓存中的 key 既可能是字符串也可能是数字，使用普通对象时 1 和 '1' 会指向同一个属性；但 Map 会严格区分二者，避免了潜在的键冲突。对于需要频繁写入和删除的会话缓存、实时价格映射、事件处理函数缓存等模块，长期运行后 Map 的稳定性往往更可控。
二、Set 的去重与成员检测：从线性扫描到常数时间
数组去重是前端开发里的常见操作。用 filter 配合 indexOf 或 includes 实现时，每次判断都需要遍历数组，整体复杂度通常为 O(n²)。当数组长度达到几万甚至几十万时，页面会感受到明显卡顿。Set 以哈希表为基础，add 和 has 操作的平均时间复杂度接近 O(1)，天然适合去重和成员存在性判断。
下面的代码展示了数组去重和权限校验两种用法：
const list = [1, 2, 3, 2, 1, 4];
const unique = [...new Set(list)];
console.log(unique); // [1, 2, 3, 4]
const allowed = new Set(['read', 'write', 'delete']);
if (allowed.has(action)) {
handleAction(action);
}
除了性能优势，Set 在语义上也更精确。它表达的是无重复值的集合，不同于数组关注顺序和索引。在处理标签选择、权限码校验、会话 ID 去重、路由白名单等任务时，使用 Set 可以让代码意图更清晰。注意 Set 的去重规则基于 SameValueZero，两个对象即使属性完全相同也会被当作不同成员，因为引用地址不同；而 NaN 和 undefined 则可以被正常识别和去重。
三、用对象作为键：Map 和 WeakMap 在关联缓存中的价值
普通对象无法直接以对象作为属性名，如果尝试 obj[someObject] = value，实际上会被转换为 [object Object] 这样的字符串，导致不同对象之间的键互相覆盖。Map 支持把任意值作为键，因此可以把元数据直接绑定到原对象而不修改它。例如需要给 DOM 节点保存事件处理器、组件实例状态或请求记录时，使用 Map 比在对象上添加自定义属性更安全，也不容易污染外部对象。
一个典型场景是使用 WeakMap 管理 DOM 相关的处理器：
const metadata = new WeakMap();
function bindHandler(element) {
const handler = () => console.log('clicked');
metadata.set(element, { handler, createdAt: Date.now() });
element.addEventListener('click', handler);
}
这里选择 WeakMap 而不是 Map，是因为 WeakMap 对键只持有弱引用。如果 DOM 节点从页面移除并且没有其他引用，垃圾回收器可以正常回收它，不会因为 metadata 这个集合导致内存泄漏。普通 Map 则会对键保持强引用，一旦忘记手动清理，容易造成长期驻留。类似的 WeakSet 可以用于标记对象状态，例如防止同一个 DOM 节点被重复初始化。
Set 同样能维护唯一订阅者列表，避免同一回调函数被重复注册。在事件总线或观察者模式中，可以直接把函数作为 Set 成员：
const listeners = new Set();
function subscribe(fn) {
if (!listeners.has(fn)) {
listeners.add(fn);
}
}
function unsubscribe(fn) {
listeners.delete(fn);
}
function emit(value) {
for (const fn of listeners) {
fn(value);
}
}
这种写法比用数组加 indexOf 去重更加直观，也能保持稳定的查找速度。
四、选型边界与实际性能测试建议
Map 和 Set 并非在所有情况下都优于传统结构。它们不支持 JSON.stringify 直接序列化，需要手动转换为数组或普通对象后才能传输；哈希表本身会带来额外的内存开销，当数据量很小且键值结构完全固定时，普通对象的序列化便利性和访问速度可能仍然更好。同样，数组在需要频繁按下标访问或保持紧凑内存布局时仍有优势。
实际项目中做性能选型，不要只看单个操作的复杂度，还要结合业务规模和数据分布。可以用 performance.now() 做多轮采样，并主动预热 JIT，减少偶然因素。更推荐使用 Chrome DevTools 的 Performance 面板直接观察长任务和内存占用。下面是一条简单的选型建议：
- 键值对需要频繁增删、键类型多样、要求严格插入顺序时，优先使用
Map。 - 去重、成员检测、集合运算等场景，优先使用
Set。 - 需要将元数据绑定到对象且不想引发内存泄漏时，使用
WeakMap或WeakSet。 - 需要 JSON 传输、键结构固定且数量不大时，普通对象和数组仍然足够。
最后，性能优化不能脱离可读性和维护成本。如果一段代码使用 Map 后性能提升明显，但同事却很难理解数据流的意图，那么需要补充注释或封装工具函数。数据结构的选择最终是为了让程序在正确、清晰和高效之间取得平衡。