11.1 Set、Map、WeakSet、WeakMap

11.1 Set、Map、WeakSet、WeakMap

ES6 引入了四种新的数据结构：Set、Map、WeakSet 和 WeakMap。它们提供了更强大的数据存储和操作能力，适用于不同的场景。本节将详细介绍这四种数据结构的特性及其用法。

11.1.1 Set

Set 是一种集合数据结构，用于存储唯一值（无重复值）。

1. 基本用法

const set = new Set();

set.add(1);
set.add(2);
set.add(2); // 重复值，不会被添加

console.log(set.size); // 输出 2
console.log(set.has(1)); // 输出 true
set.delete(1);
console.log(set.has(1)); // 输出 false

2. 遍历 Set

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

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

set.forEach((value) => {
  console.log(value); // 输出 1, 2, 3
});

3. 应用场景

• 去重：快速去除数组中的重复元素。
• 集合运算：如并集、交集、差集等。

11.1.2 Map

Map 是一种键值对数据结构，键可以是任意类型（包括对象）。

1. 基本用法

const map = new Map();

map.set("name", "Alice");
map.set({ key: "obj" }, "Object Value");

console.log(map.get("name")); // 输出 "Alice"
console.log(map.size); // 输出 2
map.delete("name");
console.log(map.has("name")); // 输出 false

2. 遍历 Map

const map = new Map([
  ["name", "Alice"],
  ["age", 25],
]);

for (const [key, value] of map) {
  console.log(`${key}: ${value}`); // 输出 "name: Alice", "age: 25"
}

map.forEach((value, key) => {
  console.log(`${key}: ${value}`); // 输出 "name: Alice", "age: 25"
});

3. 应用场景

• 存储复杂键值对：如对象作为键。
• 缓存：存储计算结果，避免重复计算。

11.1.3 WeakSet

WeakSet 是一种弱引用的集合，只能存储对象，且不会阻止垃圾回收。

1. 基本用法

const weakSet = new WeakSet();

const obj1 = {};
const obj2 = {};

weakSet.add(obj1);
weakSet.add(obj2);

console.log(weakSet.has(obj1)); // 输出 true
weakSet.delete(obj1);
console.log(weakSet.has(obj1)); // 输出 false

2. 特点

• 只能存储对象。
• 不可遍历。
• 不会阻止垃圾回收。

3. 应用场景

• 存储临时对象：如 DOM 元素，避免内存泄漏。

11.1.4 WeakMap

WeakMap 是一种弱引用的键值对数据结构，键必须是对象，且不会阻止垃圾回收。

1. 基本用法

const weakMap = new WeakMap();

const obj1 = {};
const obj2 = {};

weakMap.set(obj1, "Value 1");
weakMap.set(obj2, "Value 2");

console.log(weakMap.get(obj1)); // 输出 "Value 1"
weakMap.delete(obj1);
console.log(weakMap.get(obj1)); // 输出 undefined

2. 特点

• 键必须是对象。
• 不可遍历。
• 不会阻止垃圾回收。

3. 应用场景

• 存储私有数据：如对象的元数据。
• 缓存：存储计算结果，避免内存泄漏。

11.1.5 示例代码

示例 1：Set 去重

const array = [1, 2, 2, 3, 4, 4];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // 输出 [1, 2, 3, 4]

示例 2：Map 存储复杂键值对

const map = new Map();

const objKey = { id: 1 };
map.set(objKey, "Object Value");

console.log(map.get(objKey)); // 输出 "Object Value"

示例 3：WeakSet 存储 DOM 元素

const weakSet = new WeakSet();

const element = document.createElement("div");
weakSet.add(element);

console.log(weakSet.has(element)); // 输出 true

示例 4：WeakMap 存储私有数据

const weakMap = new WeakMap();

const obj = {};
weakMap.set(obj, { privateData: "Secret" });

console.log(weakMap.get(obj)); // 输出 { privateData: "Secret" }

11.1.6 总结

• Set：存储唯一值，适用于去重和集合运算。
• Map：存储键值对，键可以是任意类型。
• WeakSet：存储对象，不会阻止垃圾回收。
• WeakMap：存储键值对，键必须是对象，不会阻止垃圾回收。

通过掌握这四种数据结构，你可以更好地处理不同的数据存储和操作需求。在接下来的学习中，我们将继续探索 JavaScript 的其他高级特性。

思考题：

1. Set 和 Map 的主要区别是什么？
2. 在什么情况下应该使用 WeakSet 和 WeakMap？
3. 如何使用 Set 实现数组去重？