当前位置：首页 > news >正文

红宝书第十四讲：详解JavaScript集合类型：Map、Set、WeakMap

news 来源：原创 2025/4/28 0:03:54

红宝书第十四讲：详解JavaScript集合类型：Map、Set、WeakMap

资料取自《JavaScript高级程序设计（第5版）》。
查看总目录：红宝书学习大纲

一、Map：钥匙任选的“保险箱”

Map的键可以是任意数据类型（如对象、函数），不像普通Object只能用字符串/符号作为键。适合需要复杂键的场景 ¹。

示例：员工信息管理

// 创建Map（支持链式操作）
const employeeMap = new Map();
const emp1 = { id: 1001 };

employeeMap.set(emp1, { name: '小明', age: 25 });
employeeMap.set('default', '未分配员工');

// 获取值
console.log(employeeMap.get(emp1)); // {name: '小明', age: 25}
console.log(employeeMap.get('default')); // "未分配员工"

// 遍历
employeeMap.forEach((value, key) => 
  console.log(`键类型：${typeof key} → 值：${JSON.stringify(value)}`)
);
// 输出：
// 键类型：object → 值：{"name":"小明","age":25}
// 键类型：string → 值："未分配员工"

¹: 参考资料1指出Map的键类型灵活性优于普通对象

二、Set：自动去重的“筛子”

Set存储唯一值，重复添加会被自动过滤。常用于统计不重复项或去重操作 ²。

示例：统计不同城市用户

const cities = new Set();
cities.add('北京');
cities.add('上海').add('北京'); // 重复添加无效

console.log(cities.size); // 2
console.log([...cities]); // ['北京', '上海']

// 数组去重（经典用法）
const nums = [1, 2, 2, 3, 3, 3];
const uniqueNums = [...new Set(nums)]; // [1, 2, 3]

²: 参考资料1说明Set的自动去重特性

三、WeakMap & WeakSet：环保的“临时挂钩”

WeakMap的键必须为对象且弱引用（不阻止垃圾回收），适合临时关联数据而不造成内存泄漏 ³。

示例：记录DOM元素的附加数据

// 存储按钮点击次数（按钮消失后自动删除记录）
const clickCountMap = new WeakMap();
const btn = document.querySelector('#loginBtn');

btn.addEventListener('click', () => {
  const count = (clickCountMap.get(btn) || 0) + 1;
  clickCountMap.set(btn, count);
  console.log(`点击次数：${count}`);
});

// 若btn从DOM移除 → btn对象将被回收，clickCountMap中的条目自动消失

³: 参考资料3和6强调WeakMap键的弱引用特性

对比普通Map与WeakMap：

内存管理：WeakMap自动释放无引用键的数据，避免内存泄漏（如移除的DOM元素）⁴
限制：WeakMap不可遍历，键只能是对象（原始类型报错❌）

⁴: 参考资料6通过DOM节点示例说明WeakMap的自动清理优势

总结与适用场景

类型	特点	使用场景
Map	键类型灵活、可遍历	替代复杂键的Object
Set	值唯一性保证	数组去重、集合运算
WeakMap	弱引用键、内存自动回收	缓存DOM元素相关数据

重要提醒：