最全的`Map` 和 `WeakMap`的区别

WeakMap 和 Map 的区别及面试追问知识点

一、两者区别总结

（一）基本概念

Map 和 WeakMap 均为 JavaScript 中用于存储键值对的数据结构，但在多个关键特性上有显著差异。

（二）键的类型限制

1. Map

   • 键类型无严格限制，可接受基本数据类型（如字符串、数字、布尔值）以及引用数据类型（如对象、数组、函数）。

   • 示例代码：

     const myMap = new Map();
     const objKey = {};
     const strKey = 'stringKey';
     const numKey = 123;
     myMap.set(objKey, 'value for object key');
     myMap.set(strKey, 'value for string key');
     myMap.set(numKey, 'value for number key');
     console.log(myMap.get(objKey)); // 输出：value for object key
     console.log(myMap.get(strKey)); // 输出：value for string key
     console.log(myMap.get(numKey)); // 输出：value for number key

2. WeakMap

   • 键必须为对象，使用基本数据类型作为键会抛出错误。

   • 示例代码：

     const myWeakMap = new WeakMap();
     const obj = {};
     myWeakMap.set(obj, 'value for object key');
     console.log(myWeakMap.get(obj)); // 输出：value for object key
     // 以下代码会报错
     // myWeakMap.set('stringKey', 'value');

（三）垃圾回收机制

1. Map

   • 对键和值采用强引用，只要 Map 对象存在，其引用的键值对不会被垃圾回收，即便在其他地方无引用。

   • 示例代码：

     let myMap = new Map();
     let keyObj = {};
     myMap.set(keyObj, 'value');
     keyObj = null; // keyObj 被设为 null，但 myMap 中的键值对仍存在

2. WeakMap

   • 对键采用弱引用，若对象仅被 WeakMap 作为键引用且在别处无引用，该对象可被垃圾回收，对应键值对自动从 WeakMap 移除。

   • 示例代码：

     let myWeakMap = new WeakMap();
     let keyObj = {};
     myWeakMap.set(keyObj, 'value');
     keyObj = null; // keyObj 被设为 null 后，myWeakMap 中的键值对可能被垃圾回收

（四）迭代能力

1. Map

   • 可迭代，支持 for...of 循环、forEach 方法等遍历获取键值。

   • 示例代码：

     const myMap = new Map();
     myMap.set('key1', 'value1');
     myMap.set('key2', 'value2');
     for (const [key, value] of myMap) {
         console.log(key, value); // 输出：key1 value1，key2 value2
     }
     myMap.forEach((value, key) => {
         console.log(key, value); // 输出：key1 value1，key2 value2
     });

2. WeakMap

   • 不可迭代，不支持 for...of 循环和 forEach 方法，仅能通过 get、set、has 和 delete 方法操作元素。

   • 示例代码：

     const myWeakMap = new WeakMap();
     const obj = {};
     myWeakMap.set(obj, 'value');
     console.log(myWeakMap.get(obj)); // 输出：value
     console.log(myWeakMap.has(obj)); // 输出：true
     myWeakMap.delete(obj); // 删除键值对

（五）应用场景

1. Map
   • 适用于需存储任意类型键值对并进行迭代操作的场景，如缓存系统存储不同类型数据。
2. WeakMap
   • 因其弱引用特性，常用于存储与对象关联的元数据以避免内存泄漏，如在 DOM 元素上存储额外信息，DOM 元素移除时相关元数据自动清理。

---

二、面试追问方向

（一）垃圾回收机制相关

1. 深入原理

   • 问题 ：详细解释 JavaScript 垃圾回收的具体算法，以及 WeakMap 的弱引用如何与这些算法协同工作？
     回答要点 ：
     • 介绍常见垃圾回收算法（如标记-清除、标记-整理等）的原理。
     • 阐述 WeakMap 的弱引用在垃圾回收算法中对键对象可达性判断及回收过程的影响。
   • 问题 ：当对象被 WeakMap 作为键引用，垃圾回收过程中如何判断该对象是否可被回收？
     回答要点 ：
     • 说明垃圾回收器判断对象可回收的依据（如是否有强引用指向对象）。
     • 强调 WeakMap 的弱引用不影响对象可达性判断。

2. 实际影响

   • 问题 ：实际项目中，如何验证 WeakMap 中键值对因键对象被垃圾回收而自动移除？
     回答要点 ：
     • 借助调试工具（如 Chrome DevTools 的内存分析功能）。
     • 或通过代码逻辑在键对象被设为 null 前后检查 WeakMap 状态（如能否获取对应值、WeakMap 大小变化）。
   • 问题 ：在 WeakMap 中存储大量对象作为键，对垃圾回收性能有何影响？
     回答要点 ：
     • 分析垃圾回收器频繁扫描 WeakMap 中弱引用对象对性能的损耗，如增加扫描时间、影响应用响应速度等。

（二）性能方面

1. 操作性能对比

   • 问题 ：Map 和 WeakMap 在 set、get、delete 操作时，性能有何差异？在什么情况下差异显著？
     回答要点 ：
     • 对比两者内部实现机制对操作性能的影响。
     • WeakMap 因键类型单一可能在某些简单场景操作稍快，但 Map 因可迭代和支持复杂键类型在通用场景更灵活，性能可能稍逊。
     • 数据量大小、键值类型复杂度等因素会影响性能差异。
   • 问题 ：数据量非常大时，Map 和 WeakMap 性能表现如何？如何选择更合适的数据结构提升性能？
     回答要点 ：
     • 分析 Map 因强引用和可迭代导致的内存占用和遍历性能问题。
     • WeakMap 在内存管理上有优势，但无法遍历。
     • 根据具体业务操作需求（如是否需要频繁遍历、数据生命周期管理）选择合适结构。

2. 内存占用

   • 问题 ：Map 和 WeakMap 在内存占用上有何不同？举例说明不同场景下的内存使用情况？
     回答要点 ：
     • 阐述 Map 强引用键值对导致内存占用随数据量线性增长。
     • WeakMap 弱引用键在对象可回收时减少内存占用。
     • 例如，在缓存大量短期使用对象的场景下，WeakMap 的内存优势更明显。
   • 问题 ：如何优化 Map 和 WeakMap 的内存使用，特别是处理大量数据时？
     回答要点 ：
     • 对 Map 可定期清理无用键值对，采用合适的数据结构嵌套减少内存浪费。
     • 对 WeakMap 合理控制弱引用对象的生命周期，避免不必要的对象创建和引用。

（三）应用场景拓展

1. 更多实际案例
   • 问题 ：除缓存系统和存储 DOM 元素元数据外，Map 和 WeakMap 还有哪些实际应用场景？详细说明。
     回答要点 ：
     • Map：用于函数重载（根据参数类型或数量存储不同实现）、事件总线（存储事件名与回调函数映射）。
     • WeakMap：用于类实例间共享临时数据（避免强引用循环）、在复杂数据结构中标记临时状态（不影响主数据结构的内存管理）。
   • 问题 ：复杂前端项目中，如何根据业务需求合理使用 Map 和 WeakMap 优化代码结构和性能？
     回答要点 ：
     • 结合项目中数据类型、生命周期、操作需求等方面。
     • 例如，页面路由参数管理用 Map