ES6的WeakMap和WeakSet：深入浅出的理解和运用

2023-10-02 03:00:22

WeakMap：独特的键值对映射

WeakMap是一种特殊的哈希表，它允许我们将对象作为键，存储与这些对象关联的值。这种独特的特性使得它非常适合处理弱引用，即当键不再被其他变量引用时，键值对也会被自动释放。

举个例子，我们在开发单页应用时，经常会遇到需要缓存某些数据的情况。如果我们使用传统的哈希表来存储这些缓存，那么当数据不再被使用时，它们仍然会占用内存，直到垃圾回收器介入。然而，如果我们使用WeakMap，那么当数据不再被使用时，WeakMap会自动释放这些键值对，从而有效地减少内存占用。

WeakSet：对象的集合

WeakSet与WeakMap类似，它也是一种特殊的集合，但它只允许我们存储对象。也就是说，WeakSet中的每个元素都必须是一个对象。

WeakSet非常适合用来跟踪对象的存在。例如，我们可以使用WeakSet来记录已经加载过的图像资源，这样当我们再次需要加载同一张图片时，我们可以直接从WeakSet中获取，而无需重复加载。

WeakMap和WeakSet的特性

WeakMap和WeakSet具有以下几个重要的特性：

键的类型只能是对象
键是弱引用，当键不再被其他变量引用时，键值对会被自动释放
键值对是私有的，只能在创建WeakMap或WeakSet的上下文中访问
键值对的顺序是任意的，不能通过索引来访问
WeakMap和WeakSet本身不是可迭代的，但它们提供了方法来遍历键值对

WeakMap和WeakSet的使用场景

WeakMap和WeakSet在JavaScript中有着广泛的应用场景，以下是一些常见的例子：

缓存数据
跟踪对象的存在
实现私有数据
管理DOM事件监听器
优化性能

示例代码

以下是一些使用WeakMap和WeakSet的示例代码：

// 使用WeakMap缓存数据
const cache = new WeakMap();
const key1 = { foo: 'bar' };
const key2 = { baz: 'qux' };
cache.set(key1, 'value1');
cache.set(key2, 'value2');
console.log(cache.get(key1)); // 'value1'
console.log(cache.get(key2)); // 'value2'

// 使用WeakSet跟踪对象的存在
const visited = new WeakSet();
const obj1 = { foo: 'bar' };
const obj2 = { baz: 'qux' };
visited.add(obj1);
visited.add(obj2);
console.log(visited.has(obj1)); // true
console.log(visited.has(obj2)); // true

// 实现私有数据
const Person = function() {
  const privateData = new WeakMap();
  this.getName = function() {
    return privateData.get(this);
  };
  this.setName = function(name) {
    privateData.set(this, name);
  };
};

const person = new Person();
person.setName('John Doe');
console.log(person.getName()); // 'John Doe'

// 管理DOM事件监听器
const elements = document.querySelectorAll('button');
const listeners = new WeakMap();
elements.forEach((element) => {
  const listener = () => {
    console.log('Button clicked!');
  };
  listeners.set(element, listener);
  element.addEventListener('click', listener);
});

// 优化性能
class Cache {
  constructor() {
    this.cache = new WeakMap();
  }

  get(key) {
    if (this.cache.has(key)) {
      return this.cache.get(key);
    }

    // 计算值并将其存储在缓存中
    const value = calculateValue(key);
    this.cache.set(key, value);
    return value;
  }
}

const cache = new Cache();
const values = [];
for (let i = 0; i < 100000; i++) {
  values.push(cache.get(i));
}