简单述说 Es6 中 Map 与WeakMap 的区别及应用场景在平时的日常开发中 Map 这个数据结构我们经常使用到，

在平时的日常开发中 Map 这个数据结构我们经常使用到，尤为频繁的是替代之前的Object 的使用，但是 WeakMap 我们却很少使用到，但是在Vue3 的响应式系统中就使用到了 WeakMap 这个结构进行响应式的存储；今天我们就简单的来述说一下他们两者之间的差异以及具体的使用场景：

一、Map 和 WeakMap的概述

Map：
- Map是一种新的数据结构，用于存储键值对。它允许任何类型的值作为键，包括对象、原始类型等。
- Map提供了一系列方法来操作键值对，如 set（设置键值对）、get（获取对应键的值）、delete（删除键值对）等。
WeakMap：
- WeakMap也是用于存储键值对的数据结构，但它的键必须是对象，并且这些对象是弱引用的。
- 这意味着当作为键的对象没有其他强引用时，垃圾回收器可以回收该对象，并且对应的键值对也会从 WeakMap 中自动移除。

二、区别

键的类型：
- Map可以使用任何类型的值作为键，包括原始类型（如字符串、数字、布尔值等）和对象。
- WeakMap只能使用对象作为键。
引用类型：
- Map对键的引用是强引用，这意味着只要 Map 实例存在，其中的键就不会被垃圾回收器回收。
- WeakMap对键的引用是弱引用，当作为键的对象没有其他强引用时，垃圾回收器可以回收该对象，并且对应的键值对也会自动从 WeakMap 中移除。
可迭代性：
- Map是可迭代的，可以使用 for...of 循环遍历其键值对。
- WeakMap是不可迭代的，不能直接遍历其内容。
方法和属性：
- Map具有一些方法如 keys()、values()、entries() 用于获取键、值或键值对的迭代器。它还有 size 属性表示键值对的数量。
- WeakMap只有 get()、set()、has() 和 delete() 方法，没有类似于 Map 的可用于遍历的方法和 size 属性。

三、应用场景及使用案例

Map的应用场景：

存储配置信息：

const configMap = new Map();
configMap.set('apiUrl', 'https://example.com/api');
configMap.set('timeout', 5000);

function makeRequest() {
  const url = configMap.get('apiUrl');
  const timeout = configMap.get('timeout');
  // 进行请求
}

缓存数据：

const cache = new Map();
function expensiveOperation(key) {
  if (cache.has(key)) {
    return cache.get(key);
  }
  const result = performExpensiveCalculation(key);
  cache.set(key, result);
  return result;
}

WeakMap的应用场景：

存储私有数据：

const privateData = new WeakMap();

class MyClass {
  constructor() {
    privateData.set(this, { secret: 'This is a secret' });
  }

  getSecret() {
    return privateData.get(this).secret;
  }
}

const obj = new MyClass();
console.log(obj.getSecret());

避免内存泄漏：
在某些情况下，如果使用 Map 存储对象相关的数据，即使该对象不再被其他地方引用，由于 Map 的强引用，该对象可能不会被垃圾回收。而使用 WeakMap 可以避免这种情况。
```
const weakMapData = new WeakMap();
function processObject(obj) {
  if (!weakMapData.has(obj)) {
    weakMapData.set(obj, { processed: true });
  }
  // 对对象进行处理
}
```

总之，Map 和 WeakMap 在不同的场景下有各自的用途。Map 适用于需要存储各种类型的键值对并且需要进行遍历和操作的情况。而 WeakMap 适用于需要存储与对象相关的私有数据或者需要避免因强引用导致的内存泄漏问题。

最后的最后

下面请上我们今天的主角：有请小趴菜

小趴菜.jpeg