JavaScript集合与映射：Set、Map、WeakSet与WeakMap详解

1. JavaScript集合与映射的核心概念解析

在JavaScript的日常开发中，我们经常需要处理各种数据集合。ES6引入的Set、WeakSet、Map和WeakMap这四种数据结构，为开发者提供了更专业的数据组织方式。它们与传统的Array和Object相比，在特定场景下能带来显著的性能优势和语义清晰度。

Set是一种值唯一的集合，它最典型的应用场景是数组去重。比如在处理用户标签时，用Set可以轻松实现标签唯一性保证：

javascript复制const tags = ['前端', 'JavaScript', '后端', '前端', '数据库'];
const uniqueTags = [...new Set(tags)]; 
// 结果: ['前端', 'JavaScript', '后端', '数据库']

Map则是键值对集合，与普通Object的最大区别在于：

1. Map的键可以是任意类型（包括对象），而Object的键只能是字符串或Symbol
2. Map维护键值对的插入顺序，这在需要顺序保证的场景非常有用
3. Map有更直观的size属性获取元素数量

2. Set与WeakSet的深度对比与应用

2.1 Set的核心特性与API

Set实例提供了完整的集合操作方法：

• add(value) - 添加元素，已存在则忽略
• has(value) - 检查存在性
• delete(value) - 删除元素
• clear() - 清空集合
• size - 获取元素数量

一个实际案例是管理网页中的活动订阅：

javascript复制class EventBus {
  constructor() {
    this.subscribers = new Set();
  }
  
  subscribe(callback) {
    this.subscribers.add(callback);
    return () => this.subscribers.delete(callback);
  }
  
  publish(event) {
    this.subscribers.forEach(cb => cb(event));
  }
}

2.2 WeakSet的特殊性与适用场景

WeakSet与常规Set有三个关键区别：

1. 只能存储对象引用（不能是原始值）
2. 弱引用机制（不阻止垃圾回收）
3. 不可枚举（没有size属性及遍历方法）

这种特性使其特别适合用于对象标记：

javascript复制const processedFiles = new WeakSet();

function processFile(file) {
  if (processedFiles.has(file)) {
    return;
  }
  // 处理文件逻辑...
  processedFiles.add(file);
}

提示：当需要关联对象的元数据但又不想影响对象生命周期时，WeakSet是最佳选择。但要注意它无法被遍历或获取大小。

3. Map与WeakMap的实战应用剖析

3.1 Map的进阶使用模式

Map在以下场景比Object更具优势：

• 需要频繁增删键值对时（性能更好）
• 需要保持插入顺序时（如实现LRU缓存）
• 键的类型不确定或需要对象作为键时

一个典型的DOM节点元数据管理案例：

javascript复制const nodeMetadata = new Map();

function setNodeData(node, data) {
  nodeMetadata.set(node, {
    ...nodeMetadata.get(node),
    ...data
  });
}

function getNodeData(node) {
  return nodeMetadata.get(node);
}

3.2 WeakMap的内存管理优势

WeakMap与Map的主要差异：

• 键必须是对象（原始值会报错）
• 键是弱引用（不影响垃圾回收）
• 不可枚举（没有size和遍历方法）

这在私有数据存储场景非常有用：

javascript复制const privateData = new WeakMap();

class Person {
  constructor(name) {
    privateData.set(this, { name });
  }
  
  getName() {
    return privateData.get(this).name;
  }
}

4. 性能对比与选型指南

4.1 数据结构操作性能实测

通过百万级数据测试（单位：ms）：

4.2 选型决策树

1. 需要唯一值集合？
   • 是 → 需要弱引用？ → WeakSet
   • 否 → Set
2. 需要键值对？
   • 键是对象且需要弱引用？ → WeakMap
   • 需要频繁增删或有序？ → Map
   • 其他情况 → Object

5. 常见问题与解决方案

5.1 序列化问题处理

Set和Map默认JSON.stringify会得到空对象，解决方案：

javascript复制const set = new Set([1, 2, 3]);
const serialized = JSON.stringify([...set]);
const deserialized = new Set(JSON.parse(serialized));

5.2 浏览器兼容性垫片

对于老版本浏览器，推荐使用core-js的polyfill：

bash复制npm install core-js

然后在入口文件导入：

javascript复制import 'core-js/features/set';
import 'core-js/features/map';

5.3 与数组的转换技巧

Set与数组互转的高效方式：

javascript复制// 数组转Set
const set = new Set(array);

// Set转数组
const array1 = [...set];
const array2 = Array.from(set);

在实际项目中，我经常使用Map来替代那些用Object模拟字典的场景。特别是在键的类型可能多样时，Map的类型安全性明显更好。一个经验是：当发现自己在用obj['key']这种方式访问属性，且键可能来自变量时，就应该考虑改用Map了。