深入理解JavaScript中的WeakMap和WeakSet

素颜马尾好姑娘i 2024-04-22 19:21 68阅读 0赞

### 公众号 ###

![在这里插入图片描述][11a8bcd82a274614a4b683b98f3e4b81.png]

### 小册 ###

> 这是我整理的学习资料，非常系统和完善，欢迎一起学习

*  **[现代JavaScript高级小册][JavaScript]**
 *  **[深入浅出Dart][JavaScript]**
 *  **[现代TypeScript高级小册][JavaScript]**
 *  **[linwu的算法笔记?][linwu]**

## 深入理解JavaScript中的WeakMap和WeakSet ##

在JavaScript的ES6版本中，引入了两种新的数据结构——`WeakMap`和`WeakSet`。与Map和Set相比，这两种数据结构有一些特殊的特点和用途，因此在某些场合下，它们是更好的选择。本文将深入探讨`WeakMap`和`WeakSet`的特性和用途。

### 1. WeakMap和WeakSet概述 ###

在我们深入研究这两种新的数据结构之前，首先来了解一下它们的基本特性。

#### 1.1 WeakMap ####

`WeakMap`是一种键值对的集合，类似于`Map`。不过，`WeakMap`与`Map`有几个重要的区别：

*  在`WeakMap`中，只有对象可以作为键。换句话说，我们不能使用基本类型（如数字，字符串，布尔值等）作为`WeakMap`的键。
 *  `WeakMap`的键是弱引用的。这意味着，如果一个对象只被`WeakMap`引用，那么这个对象可以被垃圾回收（GC）。当这个对象被垃圾回收后，它对应的键值对也会从`WeakMap`中自动移除。
 *  `WeakMap`不可遍历，也就是说，我们不能使用像`for...of`这样的循环来遍历`WeakMap`。

由于这些特性，`WeakMap`在处理内存泄漏问题和管理对象私有数据等场景中有着显著的优势。

#### 1.2 WeakSet ####

`WeakSet`也是一种集合，类似于`Set`。`WeakSet`与`Set`的主要区别包括：

*  在`WeakSet`中，只有对象可以作为值。也就是说，我们不能将基本类型（如数字，字符串，布尔值等）添加到`WeakSet`中。
 *  `WeakSet`中的对象是弱引用的。如果一个对象只被`WeakSet`引用，那么这个对象可以被垃圾回收。当这个对象被垃圾回收后，它会自动从`WeakSet`中移除。
 *  `WeakSet`不可遍历，也就是说，我们不能使用像`for...of`这样的循环来遍历`WeakSet`。

`WeakSet`在处理对象的唯一性、内存泄漏等问题上有其独特的应用。

### 2. WeakMap深入解析 ###

#### 2.1 WeakMap的创建和使用 ####

我们可以使用`new WeakMap()`来创建一个新的`WeakMap`。在创建了`WeakMap`之后，我们可以使用`set`方法来添加新的键值对，

使用`get`方法来获取某个键对应的值，使用`delete`方法来移除某个键及其对应的值，使用`has`方法来检查`WeakMap`中是否存在某个键。

let weakMap = new WeakMap();
    
    let obj1 = {
        };
    let obj2 = {
        };
    
    // 添加键值对
    weakMap.set(obj1, 'Hello');
    weakMap.set(obj2, 'World');
    
    // 获取值
    console.log(weakMap.get(obj1)); // 输出: 'Hello'
    console.log(weakMap.get(obj2)); // 输出: 'World'
    
    // 检查键是否存在
    console.log(weakMap.has(obj1)); // 输出: true
    console.log(weakMap.has(obj2)); // 输出: true
    
    // 删除键值对
    weakMap.delete(obj1);
    console.log(weakMap.has(obj1)); // 输出: false

#### 2.2 WeakMap和内存管理 ####

`WeakMap`最重要的特性就是其键对对象的弱引用。这意味着，如果一个对象只被`WeakMap`引用，那么这个对象可以被垃圾回收。这样就可以防止因为长时间持有对象引用导致的内存泄漏。

例如，如果我们在`Map`中保存了一些对象的引用，即使这些对象在其他地方都已经不再使用，但是由于它们仍被`Map`引用，所以它们不能被垃圾回收，这就可能导致内存泄漏。然而，如果我们使用`WeakMap`来保存这些对象的引用，那么当这些对象在其他地方都不再使用时，它们就会被垃圾回收，从而防止了内存泄漏。

#### 2.3 WeakMap和对象私有数据 ####

`WeakMap`还常常被用来保存对象的私有数据。这是因为`WeakMap`的键不可遍历，所以我们可以利用这个特性来存储一些只有特定代码能够访问的数据。

例如，我们可以创建一个`WeakMap`，然后使用这个`WeakMap`来保存每个对象的私有数据，像这样：

在这个例子中，我们创建了一个`MyClass`的类，每一个`MyClass`的实例都有一个私有数据`secret`。我们使用`WeakMap`来保存这个私有数据。这样，我们就可以在`MyClass`的方法中访问这个私有数据，但是其他的代码无法访问它。

### 3. WeakSet深入解析 ###

#### 3.1 WeakSet的创建和使用 ####

我们可以使用`new WeakSet()`来创建一个新的`WeakSet`。在创建了`WeakSet`之后，我们可以使用`add`方法来添加新的对象，使用`delete`方法来移除某个对象，使用`has`方法来检查`WeakSet`中是否存在某个对象。

let weakSet = new WeakSet();
    
    let obj1 = {
        };
    let obj2 = {
        };
    
    // 添加对象
    weakSet.add(obj1);
    weakSet.add(obj2);
    
    // 检查对象是否存在
    console.log(weakSet.has(obj1)); // 输出: true
    console.log(weakSet.has(obj2)); // 输出: true
    
    // 删除对象
    weakSet.delete(obj1);
    console.log(weakSet.has(obj1)); // 输出: false

#### 3.2 WeakSet和对象唯一性 ####

`WeakSet`可以用来检查一个对象是否已经存在。由于`WeakSet`中的每个对象都是唯一的，所以我们可以利用这个特性来确保我们不会添加重复的对象。

例如，我们可以创建一个`WeakSet`，然后使用这个`WeakSet`来保存所有我们已经处理过的对象，像这样：

let processedObjects = new WeakSet();
    
    function processObject(obj) {
        
      if (!processedObjects.has(obj)) {
        
        // 处理对象
        // ...
    
        // 将对象添加到WeakSet中，表示我们已经处理过这个对象
        processedObjects.add(obj);
      }
    }

在这个例子中，我们在每次处理一个对象之前，都会检查这个对象是否已经被处理过。如果这个对象已经被处理过，我们就不会再处理它。这样，我们就可以确保我们不会重复处理同一个对象。

#### 3.3 WeakSet和内存管理 ####

与`WeakMap`一样，`WeakSet`中的对象也是弱引用的，所以`WeakSet`也有优秀的内存管理特性。如果一个对象只被`WeakSet`引用，那么这个对象可以被垃圾回收。这样就可以防止因为长时间持有对象引用导致的内存泄漏。

例如，如果我们在`Set`中保存了一些对象的引用，即使这些对象在其他地方都已经不再使用，但是由于它们仍被`Set`引用，所以它们不能被垃圾回收，这就可能导致内存泄漏。然而，如果我们使用`WeakSet`来保存这些对象的引用，那么当这些对象在其他地方都不再使用时，它们就会被垃圾回收，从而防止了内存泄漏。

### 4. 结论 ###

在JavaScript的ES6版本中，引入了`WeakMap`和`WeakSet`这两种新的数据结构。与`Map`和`Set`相比，它们有一些特殊的特点和用途，使它们在处理内存泄漏问题、管理对象私有数据、处理对象的唯一性等场景中有显著的优势。理解它们的特性和用法，可以帮助我们更有效地使用JavaScript来编写高效、稳定的代码。

[11a8bcd82a274614a4b683b98f3e4b81.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/1c0d2c7ed8714dad96de7639237389b9.png
[JavaScript]: https://www.coding-time.cn
[linwu]: https://www.coding-time.cn/lc