✨TypeScript 中的 Map 和 Set：深入解析及实用示例

---

TypeScript 中的 Map 和 Set：深入解析及实用示例

在日常开发中，Map 和 Set 是处理键值对和唯一值集合的两种高效数据结构。TypeScript 对它们提供了强类型支持，使代码更加安全和可维护。本文将详细介绍它们的用法、特性及代码示例。

---

☝️1 Map 的用法与特性

Map 是键值对的集合，允许我们使用任意类型的键，并且保留插入顺序。

✌️1.1 创建 Map

const map = new Map<string, number>();
map.set('a', 1);
map.set('b', 2);

console.log(map); // 输出：Map(2) { 'a' => 1, 'b' => 2 }

• Map<K, V> 接受两个类型参数：键类型 K 和值类型 V。
• 使用 set 方法添加键值对。

---

✌️1.2 常用方法

以下是 Map 的常用方法及其作用：

方法名	描述	示例代码
set(key, value)	添加键值对或更新值	map.set('a', 3);
get(key)	根据键获取值	console.log(map.get('a')); // 输出：3
has(key)	检查键是否存在	console.log(map.has('a')); // 输出：true
delete(key)	删除指定键	map.delete('a');
size	获取键值对数量	console.log(map.size); // 输出：1
clear()	清空所有键值对	map.clear(); console.log(map.size); // 输出：0

const map = new Map<string, number>([
  ['a', 1],
  ['b', 2],
]);

map.set('c', 3);
console.log(map.get('b')); // 输出：2
console.log(map.has('c')); // 输出：true
map.delete('a');
console.log(map.size); // 输出：2
map.clear();
console.log(map.size); // 输出：0

---

✌️1.3 遍历 Map

const map = new Map<string, number>([
  ['a', 1],
  ['b', 2],
  ['c', 3],
]);

// 使用 for-of 遍历
for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}

// 使用 forEach 遍历
map.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

输出：

a: 1
b: 2
c: 3

• for-of 迭代返回 [key, value] 数组。
• forEach 方法直接访问键值。

---

☝️2 Set 的用法与特性

Set 是一个值的集合，其中的值是唯一的。它支持快速判断值的存在与操作。

✌️2.1 创建 Set

const set = new Set<number>();
set.add(1);
set.add(2);
set.add(2); // 重复值会被忽略

console.log(set); // 输出：Set(2) { 1, 2 }

• Set<T> 只接受一个类型参数 T，表示集合中值的类型。
• 使用 add 方法添加值，重复值会被自动忽略。

---

✌️2.2 常用方法

以下是 Set 的常用方法及其作用：

方法名	描述	示例代码
add(value)	添加值	set.add(3);
has(value)	检查值是否存在	console.log(set.has(3)); // 输出：true
delete(value)	删除指定值	set.delete(2);
size	获取集合大小	console.log(set.size); // 输出：1
clear()	清空所有值	set.clear(); console.log(set.size); // 输出：0

const set = new Set<string>(['apple', 'banana']);

set.add('orange');
console.log(set.has('apple')); // 输出：true
set.delete('banana');
console.log(set.size); // 输出：2
set.clear();
console.log(set.size); // 输出：0

---

✌️2.3 遍历 Set

const set = new Set<number>([1, 2, 3, 4]);

// 使用 for-of 遍历
for (const value of set) {
  console.log(value);
}

// 使用 forEach 遍历
set.forEach((value) => {
  console.log(value);
});

输出：

1
2
3
4

• for-of 直接返回值。
• forEach 方法与数组类似。

---

☝️3 Map 和 Set 的高级用法

✌️3.1 使用复杂类型作为键（适用于 Map）

const objKey = { id: 1 };
const map = new Map<object, string>();

map.set(objKey, 'value1');
console.log(map.get(objKey)); // 输出：value1

注意：

• 键的比较基于引用，而不是值。如果键是对象，需确保引用一致。

---

✌️3.2 去重操作（适用于 Set）

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueSet = new Set<number>(arr);

console.log([...uniqueSet]); // 输出：[1, 2, 3, 4, 5]

注意：

• 使用 Set 快速去重，将其转换为数组即可。

---

✌️3.3 求交集和差集（适用于 Set）

const setA = new Set<number>([1, 2, 3, 4]);
const setB = new Set<number>([3, 4, 5, 6]);

// 求交集
const intersection = new Set([...setA].filter((x) => setB.has(x)));
console.log(intersection); // 输出：Set { 3, 4 }

// 求差集
const difference = new Set([...setA].filter((x) => !setB.has(x)));
console.log(difference); // 输出：Set { 1, 2 }

---

☝️4 Map 和 Set 的性能

• Map 的插入、删除和访问操作复杂度为 O(1)，非常适合频繁的键值对操作。
• Set 的添加和删除操作复杂度为 O(1)，适合处理需要快速去重或判断值存在的场景。

---