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

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


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

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

示例:员工信息管理
// 创建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: 参考资料1指出Map的键类型灵活性优于普通对象


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

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

示例:统计不同城市用户
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]

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


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

WeakMap的键必须为对象弱引用(不阻止垃圾回收),适合临时关联数据而不造成内存泄漏 3

示例:记录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: 参考资料3和6强调WeakMap键的弱引用特性

flowchart LR
    WeakMap -->|键为对象| 对象A(emp1)
    WeakMap -->|键为对象| 对象B(btn)
    WeakMap -->|弱引用| 垃圾回收(Garbage Collector)
    垃圾回收 --> 对象被回收时自动清除WeakMap条目

对比普通Map与WeakMap

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

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


总结与适用场景

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

重要提醒

  • WeakMap的键只能是对象,否则报错(如wm.set('key', 123)❌)5
  • WeakSet用法类似,但存储对象集合且不可遍历

目录:总目录
上篇文章:红宝书第十三讲:详解JavaScript核心对象:Array、Object、Date、RegExp

下篇文章:红宝书第十五讲:详解JavaScript迭代器与生成器:Symbol.iterator与yield

脚注


  1. 《JavaScript高级程序设计(第5版)》(第6章Map类型)指出Map的键类型灵活性。
  2. 《JavaScript高级程序设计(第5版)》(第6章Set类型)说明Set的自动去重。
  3. 《JavaScript高级程序设计(第5版)》示例WeakMap的弱引用清理机制。
  4. 《JavaScript高级程序设计(第5版)》通过DOM节点示例WeakMap的自动清理。
  5. 《JavaScript高级程序设计(第5版)》示例WeakMap初始化时的类型错误。

kovli
7 声望4 粉丝