JavaScript 集合 (Set、WeakSet) 与映射 (Map、WeakMap)

2. Set 与 Array 互转

Set vs Array

特殊值处理

const s = new Set();
s.add(NaN);
s.add(NaN);
console.log(s.size); // 1 → NaN 被视为相等
s.add(0);
s.add(-0);
console.log(s.size); // 2 → +0 和 -0 被视为不同（符合 IEEE 754）

Array → Set（自动去重）

const arr = [1, 2, 2, 3];
const set = new Set(arr); // Set {1, 2, 3}

经典去重技巧

const unique = [...new Set([1, 2, 2, 3])]; // [1, 2, 3]

Set → Array

const set = new Set([1, 2, 3]);
const arr = [...set]; // 或 Array.from(set)

遍历 Set

Set 是可迭代对象（iterable），支持以下方式遍历：

const set = new Set([1, 2, 3]);

// 1. for...of
for (const item of set) {
  console.log(item); // 1, 2, 3
}

// 2. forEach
// `Set` 的 `forEach` 回调函数参数是 `(value, value, set)`，没有 key（与 Map 不同）
set.forEach((value, valueAgain, setRef) => {
  console.log(value); // value 和 valueAgain 相同（Set 没有 key）
});

// 3. 扩展运算符转为数组
[...set]; // [1, 2, 3]

// 4. Array.from
Array.from(set); // [1, 2, 3]

3. 高级用法示例

去除对象数组中的重复项（基于某属性）

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 1, name: 'Alice' }
];

// 使用 Set，时间复杂度为 O(n^2)
const uniqueUsers = Array.from(
  new Set(users.map(u => u.id)),
  id => users.find(u => u.id === id)
);

// 或使用 Map 更高效，时间复杂度为 O(n)
const uniqueUsersMap = Array.from(new Map(users.map(u => [u.id, u])).values());
/* 
users.map(u => [u.id, u]) 生成键值对数组：[[1, obj1], [2, obj2], [1, obj3], ...]。
new Map(...) Map 的 key 自动去重，后出现的相同 key 会覆盖前面的（若想保留第一个，可反向遍历）。
.values() 获取所有唯一对象。
Array.from(...) 转为数组。
*/

求两个数组的并集、交集、差集

const a = [1, 2, 3];
const b = [3, 4, 5];

// 并集
const union = [...new Set([...a, ...b])]; // [1, 2, 3, 4, 5]

// 交集
const intersection = [...new Set(a.filter(x => b.includes(x)))];

// 差集（a - b）
const diff = a.filter(x => !new Set(b).has(x)); // [1, 2]

4. 注意事项

• Set不支持直接获取第 n 个元素（无 .get(index) 方法）。
• Set 无法序列化为 JSON（需先转数组）：

  JSON.stringify([...mySet]);
  

• 对象去重依赖引用相等，不是内容相等：

  new Set([{ a: 1 }, { a: 1 }]).size; // 2（两个不同对象）
  

5. 总结

• Set 是处理'唯一值集合'的最佳工具，尤其适合去重、成员检测、集合运算等场景。结合扩展运算符和数组方法，能写出简洁高效的代码。
• 常用口诀：
  • 去重要用 Set。
  • 存在检查用 .has()。
  • 遍历用 for...of 或 forEach。
  • 转数组用 [...set]。

二、WeakSet 数据类型

WeakSet 是 JavaScript（ES6 引入）中一种特殊的集合数据结构，它与 Set 类似，但有关键限制和用途，那就是 WeakSet 只能存储对象（不能是原始值），且对对象的引用是'弱引用'（weakly held）——不会阻止垃圾回收（GC）。

核心特性

基本用法

核心方法（只有 3 个！）

const obj = {};
ws.add(obj);
console.log(ws.has(obj)); // true
ws.delete(obj);
console.log(ws.has(obj)); // false

没有 size 属性！ 你无法知道 WeakSet 里有多少元素。

创建和操作

const ws = new WeakSet();
// 只能添加对象
ws.add({});
ws.add(document.body);
ws.add(new Date()); // 报错：不能添加原始值
ws.add(42); // TypeError
ws.add('hello'); // TypeError
ws.add(true); // TypeError

典型场景

缓存或元数据（生命周期跟随对象）

// 为每个请求对象附加临时元数据
const requestMetadata = new WeakSet();
fetch('/api/data').then(res => {
  requestMetadata.add(res); // ... 处理响应
});
// 当 res 对象被 GC 回收时，元数据自动消失

私有数据存储（不污染对象）

// 模拟私有属性（避免在对象上直接挂 _privateData）
const privateData = new WeakSet();
class User {
  constructor(name) {
    this.name = name;
    privateData.add(this); // 标记该实例有私有数据
  }
  isValid() {
    // 检查是否属于'有效用户'
    return privateData.has(this);
  }
}

标记对象（而不阻止 GC）

// 用于标记'已处理'的 DOM 元素
const processedElements = new WeakSet();
function processElement(el) {
  if (processedElements.has(el)) {
    return; // 已处理过，跳过
  }
  // ... 处理逻辑
  processedElements.add(el);
}
// 当 el 从 DOM 移除且无其他引用时，
// 它会自动从 WeakSet 中消失（无需手动清理）

WeakSet vs Set

简单记忆：

• 用 Set 存'我要主动管理的数据'。
• 用 WeakSet 存'这个对象有某种状态，但我不负责它的生死'。

重要注意事项

1. 弱引用 ≠ 立即回收。
   • 对象是否被回收取决于 GC 时机。
   • 即使 WeakSet 是唯一引用，也可能暂时未被回收。
2. 不能用于原始值。

   // 常见错误
   const ids = new WeakSet();
   ids.add(123); // TypeError: Invalid value used in weak set
   

3. 无法遍历 = 无法知道内容。

   const ws = new WeakSet();
   ws.add({ a: 1 });
   ws.add({ b: 2 });
   // 你无法列出所有元素！
   // 没有 ws.size, 没有 for...of, 没有 .values()
   

   这是刻意设计：防止开发者依赖内部状态，确保弱引用语义。

高级技巧：结合 FinalizationRegistry（ES2021）

监听对象被 GC 的时机（谨慎使用）：

const registry = new FinalizationRegistry((heldValue) => {
  console.log(`${heldValue} 被回收了`);
});
const ws = new WeakSet();
const obj = { id: 1 };
ws.add(obj);
registry.register(obj, 'Object with id=1');
obj = null; // 解除引用
// 未来某刻 GC 后，会输出 "Object with id=1 被回收了"

FinalizationRegistry 是实验性 API，不推荐常规使用。

总结

WeakSet 是一个'只增不查全貌'的对象标记工具，核心价值在于：'我知道这个对象有某种状态，但我不持有它，让它自由生灭。'

使用口诀：

• 存对象（不能存数字/字符串）。
• 做标记（如'已初始化'、'已验证'）。
• 免清理（随对象自动消失）。
• 别遍历（根本做不到）。
• 别计数（没有 .size）。

三、Map 数据类型

Map 是 JavaScript（ES6/ES2015 引入）中一种键值对集合（key-value collection） 数据结构，用于存储任意类型的键和值的映射关系。它比普通对象（{}）更强大、更灵活，尤其适合键不是字符串或需要精确控制键值行为的场景。

Map vs 普通对象

简单说：Map 是'真正的哈希表'，而对象是'为固定结构设计的'。

基本用法

1. 遍历 Map

Map 是可迭代对象，支持多种遍历方式：

转为数组

const keys = [...map.keys()]; // [ 'name', 1, {} ]
const values = [...map.values()]; // [ 'Bob', 'number key', 'object key' ]
const entries = [...map.entries()]; // [ ['name','Bob'], [1,'...'], ... ]

内置迭代器方法

// 所有键
for (const key of map.keys()) { ... }
// 所有值
for (const value of map.values()) { ... }
// 所有键值对（默认）
for (const entry of map.entries()) {
  console.log(entry); // [key, value]
}

for...of（推荐）

for (const [key, value] of map) {
  console.log(key, value);
}

2. 核心方法

const map = new Map();
map.set('name', 'Bob');
map.set(1, 'number key');
map.set({}, 'object key'); // 键可以是对象！
console.log(map.get('name')); // 'Bob'
console.log(map.has(1)); // true
console.log(map.size); // 3

创建 Map

// 空 Map
const map = new Map();
// 从可迭代对象初始化（如数组的数组）
const map2 = new Map([
  ['name', 'Alice'],
  [42, 'answer'],
  [{ id: 1 }, 'user object']
]);

关键特性详解

• 用 DOM 元素作键 → 存储其状态。
• 用函数作键 → 缓存计算结果。

保持插入顺序

const map = new Map();
map.set(3, 'three');
map.set(1, 'one');
map.set(2, 'two');
console.log([...map.keys()]); // [3, 1, 2]（按插入顺序）

严格相等比较（SameValueZero）

键的比较使用 SameValueZero 算法（类似 ===，但 NaN === NaN 为真）。

const map = new Map();
map.set(NaN, 'not a number');
console.log(map.get(NaN)); // 'not a number'（普通对象做不到！）

键可以是任意类型

const user1 = { id: 1 };
const user2 = { id: 2 };
const userMap = new Map();
userMap.set(user1, 'Alice');
userMap.set(user2, 'Bob');
console.log(userMap.get(user1)); // 'Alice'
// 注意：必须用同一个对象引用！
console.log(userMap.get({ id: 1 })); // undefined（新对象）

适用于：

Map vs WeakMap

WeakMap 适合：不希望阻止对象被回收的场景（如给 DOM 元素附加临时数据）。

实用技巧

缓存函数结果（记忆化）

const cache = new Map();
function expensiveFn(arg) {
  if (cache.has(arg)) return cache.get(arg);
  const result = /* 耗时计算 */;
  cache.set(arg, result);
  return result;
}

去重数组（基于对象内容）

// 按 id 去重
const users = [{ id: 1 }, { id: 2 }, { id: 1 }];
const unique = [...new Map(users.map(u => [u.id, u])).values()];

Map 转对象（仅字符串键）

const map = new Map([['a', 1], ['b', 2]]);
const obj = Object.fromEntries(map);

对象转 Map

const obj = { a: 1, b: 2 };
const map = new Map(Object.entries(obj));

注意事项

不支持点语法访问

map.key; // undefined（必须用 map.get('key')）

键是对象时，必须用相同引用

map.set({ x: 1 }, 'value');
map.get({ x: 1 }); // undefined（新对象）

不能用 JSON.stringify() 直接序列化

JSON.stringify(new Map()); // '{}'
// 解决方案：先转为数组
JSON.stringify([...map]);

性能建议

总结

Map 是现代 JavaScript 中处理键值对的首选数据结构，当你遇到以下情况时，优先考虑它：

• 键不是字符串（如对象、数字、Symbol）。
• 需要频繁增删键值对。
• 需要可靠获取元素数量。
• 需要保持插入顺序。
• 担心原型污染。

记住核心 API：

const m = new Map();
m.set(key, value);
m.get(key);
m.has(key);
m.delete(key);
m.size;

四、WeakMap 数据类型

WeakMap 是 JavaScript（ES6 引入）中一种键值对集合（key-value collection），它是 Map 的'弱引用'版本，专为以对象为键、且不希望阻止垃圾回收（GC） 的场景设计。

核心特性

核心思想：'我想给这个对象附加一些数据，但我不应该影响它的生命周期。'

基本用法

不支持的操作

// 报错：键不能是原始值
wm.set('string', 1); // TypeError
wm.set(42, 'value'); // TypeError
// 不存在的方法
wm.size; // undefined
wm.clear(); // TypeError: wm.clear is not a function
[...wm]; // TypeError: wm is not iterable

创建和操作

const wm = new WeakMap();
// 键必须是对象
const obj1 = {};
const obj2 = { id: 1 };
wm.set(obj1, 'metadata for obj1');
wm.set(obj2, { count: 42 });
console.log(wm.get(obj1)); // 'metadata for obj1'
console.log(wm.has(obj2)); // true
wm.delete(obj1);

典型应用场景

• 不在对象上挂 _private 属性。
• 实例销毁时，私有数据自动消失。

缓存计算结果（生命周期跟随对象）

const cache = new WeakMap();
function expensiveCalculation(obj) {
  if (cache.has(obj)) {
    return cache.get(obj);
  }
  const result = /* 耗时计算 */;
  cache.set(obj, result);
  return result;
}
const data = { values: [...] };
expensiveCalculation(data); // 当 data 对象不再被使用，缓存自动释放

DOM 元素元数据缓存

const domMetadata = new WeakMap();
function attachHandler(el) {
  if (domMetadata.has(el)) return; // 避免重复绑定
  const state = { clickCount: 0 };
  domMetadata.set(el, state);
  el.addEventListener('click', () => {
    state.clickCount++;
    console.log('Clicked', state.clickCount, 'times');
  });
}
// 当 el 从 DOM 移除且无其他引用时，
// state 会自动被 GC 回收（无需手动清理！）

私有数据存储（不污染对象本身）

// 模拟类的私有属性（ES2022 前常用技巧）
const privateData = new WeakMap();
class User {
  constructor(name, ssn) {
    this.name = name;
    privateData.set(this, { ssn }); // 私有数据
  }
  getSSN() {
    return privateData.get(this).ssn;
  }
}
const user = new User('Alice', '123-45-6789');
console.log(user.getSSN()); // '123-45-6789'
// 外部无法直接访问 ssn！

优势：

WeakMap vs Map

选择原则：

• 需要遍历/计数 → 用 Map。
• 只想'悄悄'给对象附加数据 → 用 WeakMap。

重要注意事项

1. 弱引用 ≠ 立即回收。
   • 对象是否被回收取决于 GC 时机。
   • 即使 WeakMap 是唯一引用，也可能暂时未被回收。
2. 不能用于原始值作键。

   // 常见错误
   const wm = new WeakMap();
   wm.set('id-123', userData); // TypeError
   

3. 无法知道 WeakMap 里有什么。

   const wm = new WeakMap();
   wm.set({}, 'secret');
   // 你无法：
   // - 获取 size
   // - 列出所有键
   // - 检查是否为空
   // 这是刻意设计，确保弱引用语义不被破坏
   

高级技巧：结合 FinalizationRegistry（谨慎使用）

监听对象被 GC 的时机：

const registry = new FinalizationRegistry((heldValue) => {
  console.log(`对象 ${heldValue} 已被回收`);
});
const wm = new WeakMap();
const obj = { id: 1 };
wm.set(obj, 'data');
registry.register(obj, 'Object with id=1');
obj = null; // 解除引用
// 未来 GC 后，会触发回调

FinalizationRegistry 是实验性 API，不推荐常规使用。

总结

WeakMap 是'对象专属的私密笔记本'：

• 你只能通过原对象查笔记。
• 对象消失了，笔记自动焚毁。
• 没人能偷看你的笔记本内容.

使用口诀：

• 键是对象（不能是字符串/数字）。
• 存私有数据（不污染对象）。
• 免内存泄漏（随对象自动清理）。
• 别想遍历（根本做不到）。
• 别问大小（没有 .size）。