JavaScript中WeakMap研究_WeakMap基本介绍_WeakMap()构造函数_实例方法：delete、get、has、set

最新推荐文章于 2025-05-07 13:05:10 发布

It'sMyGo

最新推荐文章于 2025-05-07 13:05:10 发布

阅读量1k

点赞数 10

分类专栏： javascript 文章标签： javascript 开发语言 ecmascript 前端

本文链接：https://blog.youkuaiyun.com/qq_33546823/article/details/142757778

版权

javascript 专栏收录该内容

70 篇文章

订阅专栏

JavaScript中WeakMap研究：WeakMap基本介绍、WeakMap()构造函数、实例方法delete、get、has、set

在现代JavaScript开发中，WeakMap对象是一种特殊的键值对集合，用于存储键为对象且值可以是任意类型的数据。与普通的Map不同，WeakMap中的键是弱引用，这意味着如果没有其他引用指向这个键对象，那么垃圾回收器可以回收该对象以及其关联的值。这一特性使得WeakMap非常适合用于缓存、私有数据存储等场景。

本文将深入研究WeakMap对象，包括其基本介绍、WeakMap()构造函数，以及常用的实例方法：delete、get、has、set。

一、WeakMap基本介绍

1. 什么是WeakMap？

WeakMap是ES6（ECMAScript 2015）引入的一种新的集合类型，用于存储键值对，其中键必须是对象，值可以是任意类型。与Map不同的是，WeakMap中的键是弱引用，这意味着键所引用的对象可以被垃圾回收，即使它存在于WeakMap中。

特点：

键必须是对象：WeakMap的键只能是对象，不能是原始类型的值（如字符串、数字等）。
键的弱引用：如果没有其他引用指向键对象，垃圾回收器可以回收该对象以及其关联的值。
不可迭代：WeakMap不可迭代，无法使用for...of或forEach()遍历其键值对。
没有size属性：由于键是弱引用，无法确定WeakMap的大小，因此没有size属性。

2. 为什么使用WeakMap？

WeakMap的弱引用特性使其非常适合以下场景：

缓存：存储与对象关联的临时数据，当对象不再需要时，缓存会自动释放。
私有数据存储：为对象存储私有数据，防止外部访问和修改。
避免内存泄漏：在处理大量对象时，WeakMap可以帮助避免因未及时清理导致的内存泄漏。

优势：

自动垃圾回收：不需要手动删除键，当对象没有其他引用时，关联的键值对会自动被垃圾回收。
安全性：由于无法遍历WeakMap，存储在其中的数据更加安全，不易被意外访问或修改。

二、WeakMap()构造函数

1. 创建WeakMap对象

WeakMap对象可以通过WeakMap()构造函数创建。可以创建一个空的WeakMap，也可以使用可迭代对象（如数组）初始化WeakMap。

语法：

// 创建空的WeakMap
const weakMap = new WeakMap();

// 使用可迭代对象初始化WeakMap
const weakMap = new WeakMap(iterable);

iterable：一个可迭代的键值对数组，每个元素也是一个包含两个元素的数组，表示键和值。键必须是对象。

2. 示例

（1）创建空的WeakMap

const myWeakMap = new WeakMap();

（2）使用数组初始化WeakMap

const key1 = {};
const key2 = {};

const myWeakMap = new WeakMap([
  [key1, 'value1'],
  [key2, 'value2']
]);

console.log(myWeakMap.get(key1)); // "value1"
console.log(myWeakMap.get(key2)); // "value2"

（3）键必须是对象

const myWeakMap = new WeakMap();

myWeakMap.set({}, 'value'); // 正常
myWeakMap.set(1, 'value');  // TypeError: Invalid value used as weak map key

3. 注意事项

键必须是对象：如果尝试使用非对象作为键，将抛出TypeError。
不可迭代：由于键的弱引用特性，WeakMap无法被遍历，因此没有entries()、keys()、values()等方法。

三、WeakMap实例方法

WeakMap对象提供了一些实例方法，用于操作键值对集合。以下是常用的实例方法：

set(key, value)
get(key)
has(key)
delete(key)

1. set(key, value)

定义

set()方法在WeakMap对象中添加或更新一个键值对。

语法

weakMap.set(key, value);

key：键，必须是对象。
value：值，可以是任意类型。

返回值

返回WeakMap对象本身，可以链式调用。

示例

const myWeakMap = new WeakMap();

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

console.log(myWeakMap.get(objKey)); // "Object Value"

// 链式调用
myWeakMap.set({ name: 'Alice' }, 'Engineer').set({ name: 'Bob' }, 'Designer');

注意事项

如果键已存在，set()方法会更新其对应的值。
键必须是对象，非对象键会抛出TypeError。

2. get(key)

定义

get()方法返回WeakMap对象中与指定键对应的值。如果不存在该键，返回undefined。

语法

weakMap.get(key);

key：要获取其值的键。

示例

const myWeakMap = new WeakMap();

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

console.log(myWeakMap.get(objKey)); // "Object Value"

const anotherKey = { id: 2 };
console.log(myWeakMap.get(anotherKey)); // undefined

注意事项

如果键对象已经被垃圾回收，get()方法将返回undefined。

3. has(key)

定义

has()方法返回一个布尔值，表示WeakMap对象中是否存在指定的键。

语法

weakMap.has(key);

key：要检查的键。

示例

const myWeakMap = new WeakMap();

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

console.log(myWeakMap.has(objKey)); // true

myWeakMap.delete(objKey);
console.log(myWeakMap.has(objKey)); // false

注意事项

如果键对象已经被垃圾回收，has()方法将返回false。

4. delete(key)

定义

delete()方法移除WeakMap对象中与指定键对应的键值对。

语法

weakMap.delete(key);

key：要移除的键。

返回值

true：如果成功移除对应的键值对。
false：如果键不存在或已经被垃圾回收。

示例

const myWeakMap = new WeakMap();

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

console.log(myWeakMap.has(objKey)); // true

myWeakMap.delete(objKey); // 返回 true

console.log(myWeakMap.has(objKey)); // false

// 尝试删除不存在的键
const anotherKey = { id: 2 };
console.log(myWeakMap.delete(anotherKey)); // false

注意事项

如果键不存在，delete()方法返回false，WeakMap对象不发生变化。

四、WeakMap的使用场景

1. 缓存（Memoization）

WeakMap可以用于缓存函数的计算结果，避免重复计算。当对象作为键时，如果对象被垃圾回收，缓存也会自动释放。

示例

function memoize(fn) {
  const cache = new WeakMap();
  return function(obj) {
    if (cache.has(obj)) {
      return cache.get(obj);
    } else {
      const result = fn(obj);
      cache.set(obj, result);
      return result;
    }
  };
}

// 示例函数：计算对象的某个复杂属性
function computeHeavyProperty(obj) {
  // 假设这是一个耗时的计算
  return /* 复杂计算结果 */;
}

const memoizedCompute = memoize(computeHeavyProperty);

const myObj = { data: 'some data' };
const result1 = memoizedCompute(myObj); // 计算并缓存结果
const result2 = memoizedCompute(myObj); // 直接从缓存中获取结果

2. 私有数据存储

在JavaScript中，没有内置的私有属性机制。WeakMap可以用于为对象存储私有数据，防止外部访问和修改。

示例

const privateData = new WeakMap();

class Person {
  constructor(name, age) {
    privateData.set(this, { name, age });
  }

  getName() {
    return privateData.get(this).name;
  }

  getAge() {
    return privateData.get(this).age;
  }
}

const alice = new Person('Alice', 30);
console.log(alice.getName()); // "Alice"
console.log(alice.getAge());  // 30

// 无法从外部访问私有数据
console.log(privateData.get(alice)); // { name: 'Alice', age: 30 }

3. 事件监听器

在事件处理过程中，可能需要为DOM元素存储一些数据。当元素被从DOM中移除后，希望关联的数据也能被自动回收，防止内存泄漏。

示例

const elementData = new WeakMap();

function attachData(element, data) {
  elementData.set(element, data);
}

function getData(element) {
  return elementData.get(element);
}

// 使用示例
const button = document.createElement('button');
attachData(button, { clicked: false });

button.addEventListener('click', () => {
  const data = getData(button);
  data.clicked = true;
});

// 当button被移除并且没有其他引用时，关联的数据会被自动回收

五、WeakMap的局限性和注意事项

1. 不可迭代性

由于键是弱引用，WeakMap无法被遍历，因此没有entries()、keys()、values()、forEach()等方法。这是为了保护键的隐私，防止访问已经被垃圾回收的对象。

2. 无法获取大小

WeakMap没有size属性，因为无法知道其中有多少键值对。键的弱引用特性使得键值对的数量不确定。

3. 键必须是对象

WeakMap的键只能是对象，不能是原始类型的值（如字符串、数字等）。尝试使用非对象作为键会抛出TypeError。

4. 不适用于需要遍历的场景

如果需要遍历键值对或者获取集合的大小，WeakMap并不适合，应该使用Map对象。

六、WeakMap与Map的比较

1. 相同点

都是存储键值对的集合。
都有set、get、has、delete方法。
都可以使用对象作为键。

2. 不同点

键的类型：
- WeakMap：键必须是对象，且是弱引用。
- Map：键可以是任意类型，且是强引用。
垃圾回收：
- WeakMap：如果没有其他引用，键对象可以被垃圾回收。
- Map：键对象存在于Map中，即使没有其他引用，也不会被垃圾回收。
可迭代性：
- WeakMap：不可迭代，没有size属性。
- Map：可迭代，有size属性。
使用场景：
- WeakMap：适用于需要弱引用键的场景，如缓存、私有数据存储。
- Map：适用于一般的键值对存储，需要遍历或获取大小的场景。