TypeScript Map 操作全攻略：语法、特性与最佳实践

1. 引言

在现代 JavaScript 和 TypeScript 开发中，Map 对象作为一种键值对集合，其地位日益重要。它弥补了普通对象（Object）在键类型上的局限性，提供了更灵活、更强大的数据存储和操作能力。深入理解 Map 的语法、特性和最佳实践，对于编写高效、可维护的 TypeScript 代码至关重要。本文将全面探讨 TypeScript 中 Map 对象，力求覆盖从基础用法到高级技巧的各个方面。

2. Map 对象基础

2.1. Map 的定义与声明

Map 对象是一个存储键值对的集合，其中键可以是任何类型的值（包括原始类型和对象引用），这与 JavaScript 对象只能使用字符串或 Symbol 作为键形成了鲜明对比。

创建 Map 实例非常简单，使用 new Map() 构造函数即可：

typescript
let myMap = new Map();

也可以在创建时直接传入一个包含键值对数组的可迭代对象进行初始化：

typescript
let myMap = new Map([
[1, 'one'],
['two', 2],
[{ key: 3 }, 'three']
]);

2.2. 基本操作：添加、获取、删除、检查

Map 对象提供了一系列方法来操作其中的键值对：

• set(key, value): 添加或更新一个键值对。如果键已存在，则更新其对应的值。

typescript
myMap.set('name', 'Alice');
myMap.set(1, 'one'); //键可以不是字符串

• get(key): 根据键获取对应的值。如果键不存在，则返回 undefined。

typescript
let name = myMap.get('name'); // name = 'Alice'
let unknown = myMap.get('unknown'); // unknown = undefined

• has(key): 检查 Map 中是否存在指定的键。存在返回 true，否则返回 false。

typescript
let hasName = myMap.has('name'); // hasName = true
let hasAge = myMap.has('age'); // hasAge = false

• delete(key): 删除指定的键值对。如果删除成功（即键存在），返回 true；否则返回 false。

typescript
let deleted = myMap.delete('name'); // deleted = true
let notDeleted = myMap.delete('age'); // notDeleted = false

• clear(): 清空map

typescript
myMap.clear();

• size: 获取 Map 中键值对的数量。这是一个属性，而不是方法。

typescript
let size = myMap.size;

3. Map 的遍历

Map 对象提供了多种遍历方式，可以方便地访问其中的键、值或键值对。

3.1. keys()、values() 和 entries()

• keys(): 返回一个包含 Map 中所有键的迭代器。
• values(): 返回一个包含 Map 中所有值的迭代器。
• entries(): 返回一个包含 Map 中所有键值对（[key, value] 数组）的迭代器。

```typescript
let myMap = new Map([
['a', 1],
['b', 2],
['c', 3]
]);

for (let key of myMap.keys()) {
console.log(key); // 依次输出 'a', 'b', 'c'
}

for (let value of myMap.values()) {
console.log(value); // 依次输出 1, 2, 3
}

for (let [key, value] of myMap.entries()) {
console.log(key, value); // 依次输出 'a' 1, 'b' 2, 'c' 3
}
```

3.2. forEach() 方法

Map 对象还提供了 forEach() 方法，可以直接遍历键值对：

typescript
myMap.forEach((value, key) => {
console.log(key, value); // 依次输出 'a' 1, 'b' 2, 'c' 3
//注意:value在前,key在后
});

forEach 方法的第一个参数是回调函数，该函数接收两个参数：当前键值对的值和键。这与数组的 forEach 方法参数顺序不同（数组 forEach 中第一个参数是元素值，第二个参数是索引）。

4. Map 与 Object 的对比

Map 和 Object 都可以用来存储键值对，但它们之间存在显著差异。以下是两者的主要区别：

1. 键的类型:

   • Object 的键只能是字符串或 Symbol。
   • Map 的键可以是任何类型，包括原始类型（如数字、布尔值）、对象引用、甚至函数。

2. 键的顺序:

   • Object 的键的顺序在某些情况下可能不确定（尽管现代 JavaScript 引擎通常会按照插入顺序保留键）。
   • Map 会按照键值对的插入顺序保留键。

3. 迭代:

   • Object 本身不是可迭代对象，需要通过 Object.keys()、Object.values() 或 Object.entries() 等方法获取键、值或键值对数组，然后进行迭代。
   • Map 本身是可迭代对象，可以直接使用 for...of 循环或 forEach() 方法进行遍历。

4. 性能:

   • 对于频繁的键值对添加和删除操作，Map 通常比 Object 具有更好的性能。
   • 对于大量静态数据的存储和访问，Object 可能略有优势。

5. 大小:

   • Object 没有直接获取键值对数量的方法，需要通过 Object.keys().length 间接获取。
   • Map 通过 size 属性直接获取键值对数量。

6. 原型链:

7. Object 会从原型链上继承属性，如果原型链上存在和Map中key相同的属性，可能会导致意外行为.
8. Map 不存在原型链干扰.

综合比较:

| 特性 | Map | Object |
| ---------- | --------------------------------- | ----------------------------------- |
| 键类型 | 任何类型 | 字符串或 Symbol |
| 键顺序 | 插入顺序 | 不确定（通常是插入顺序） |
| 迭代 | 可直接迭代 | 需要通过辅助方法迭代 |
| 性能 | 频繁添加/删除更优 | 大量静态数据略优 |
| 大小 | size 属性 | Object.keys().length |
|原型链|无|有|

直观展示差异:

键类型:

```typescript
// Object
const obj = {};
obj[1] = 'one'; // 键被隐式转换为字符串 '1'
obj[{}] = 'object'; // 键被隐式转换为字符串 '[object Object]'

// Map
const map = new Map();
map.set(1, 'one'); // 键是数字 1
map.set({}, 'object'); // 键是一个空对象
```

迭代:

```typescript
// Object
const obj = { a: 1, b: 2 };
for (const key of Object.keys(obj)) {
console.log(key, obj[key]);
}

// Map
const map = new Map([['a', 1], ['b', 2]]);
for (const [key, value] of map) {
console.log(key, value);
}
```

5. WeakMap

WeakMap 是 Map 的一个变体，它具有一些独特的特性：

• 弱引用键： WeakMap 的键必须是对象，并且对这些对象的引用是弱引用。这意味着，如果一个对象只被 WeakMap 作为键引用，而没有其他地方引用它，那么这个对象可能会被垃圾回收机制回收。
• 不可迭代： WeakMap 不提供任何迭代方法（如 keys()、values()、entries()、forEach()），也不能使用 size 属性获取键值对数量。这是为了防止在迭代过程中，由于垃圾回收导致键值对被意外删除。
• 无法clear()

这些特性使得 WeakMap 适用于一些特殊的场景，例如：

• 存储与对象相关的私有数据： 由于 WeakMap 的键是弱引用，当对象被销毁时，与之关联的私有数据也会自动被垃圾回收，避免了内存泄漏。
• 缓存计算结果： 可以将对象作为键，将计算结果作为值存储在 WeakMap 中。当对象不再使用时，缓存的计算结果也会自动被清除。

```typescript
let weakMap = new WeakMap();
let obj = {};

weakMap.set(obj, 'some data');

console.log(weakMap.has(obj)); // true

// 当 obj 不再被其他地方引用时，它可能会被垃圾回收
obj = null;

// 此时，weakMap 中与 obj 关联的键值对也会被自动清除
```

6. Map 的高级应用

6.1. 使用 Map 实现自定义数据结构

Map 的灵活性使其成为实现各种自定义数据结构的理想选择。例如，可以使用 Map 来实现：

• 多重映射（Multimap）： 一个键可以对应多个值。

```typescript
class Multimap {
private map = new Map();

set(key: K, value: V) {
    if (!this.map.has(key)) {
        this.map.set(key, []);
    }
    this.map.get(key)!.push(value);
}

get(key: K): V[] | undefined {
    return this.map.get(key);
}
 // 其他方法...

}
```

• LRU 缓存（Least Recently Used Cache）： 一种常用的缓存淘汰策略，可以使用 Map 结合其他数据结构（如双向链表）来实现。

6.2. 利用 Map 优化算法

在某些算法问题中，Map 可以提供比普通对象更优的性能。例如，在需要频繁查找、插入和删除键值对的场景下，Map 的时间复杂度通常为 O(1)，而普通对象在最坏情况下可能退化为 O(n)。

7. 补充说明

本文详细介绍了 TypeScript 中 Map 对象的各种用法和特性。通过对Map对象基础、Map遍历、Map与Object的对比、WeakMap、Map高级应用的介绍。希望能帮助开发者更好地理解和运用 Map，编写出更高效、更健壮的代码。Map 的灵活性和强大功能使其成为 TypeScript 开发中不可或缺的一部分，值得深入学习和掌握。