ES6中的数据结构WeakMap

分手后的思念是犯贱 2022-09-16 11:22 204阅读 0赞

### 前言 ###

> 小伙伴们大家好。前面的我们已经学习了ES6中的3个关于数据结构的知识了，分别是Set、Map和WeakSet。今天要给大家分享的仍然是关于数据结构的WeakMap。从名字上看这个WeakMap并不陌生，因为既有我们前面学过的WeakSet中的Weak又有Map中的Map，所以想想WeakMap一定有跟WeakSet和Map相似的地方。下面就让我们具体来分析一下吧。

### WeakMap ###

> WeakMap的结构与Map的结构类似， 也是用于生成键值对的集合。WeakMap虽然与Map类似但是也有着自己的特点所在：
> 
>  *  WeakMap与Map一样也是使用 set 方法添加成员 get方法获取成员
>  *  WeakMap也是一个构造函数，也可以接受一个数组， 作为构造函数的参数
>  *  WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名（而Map是任何类型都可）
>  *  WeakMap的键名所指向的对象都是弱引用，不计入垃圾回收机制。因此，只要所引用的对象的其他引用都被清除，垃圾回收机制就会释放该对象所占用的内存。也就是说，一旦不再需要，WeakMap 里面的键名对象和所对应的键值对会自动消失，不用手动删除引用
>  *  WeakMap跟WeakSet一样没有size属性，也没有遍历操作的方法（keys，values，entries），因此WeakMap也是不能遍历的
>  *  WeakMap也没有clear方法，只有set()、get()、has()和delete()四个方法
> 
> 结合这些特点我们来看一些小案例

// 1. WeakMap与Map一样也是使用 set 方法添加成员 get方法获取成员
    // 2. WeakMap 也可以接受一个数组， 作为构造函数的参数
    // 3. WeakMap也没有clear方法，只有set()、get()、has()和delete()四个方法
    const wm1 = new WeakMap();
    const key = { foo: 1};
    wm1.set(key, 2);
    wm1.get(key) // 2
    
    const k1 = [1, 2, 3];
    const k2 = [4, 5, 6];
    const wm2 = new WeakMap([[k1, 'foo'], [k2, 'bar']]);
    wm2.get(k2) // "bar"
    wm2.delete(k1) //true
    wm2.has(k1) //false
    
    // 4. WeakMap只能接受对象作为键名，null除外
    const map = new WeakMap();
    map.set(1, 2)
    // TypeError: 1 is not an object!
    map.set(Symbol(), 2)
    // TypeError: Invalid value used as weak map key
    map.set(null, 2)
    // TypeError: Invalid value used as weak map key
    
    //5. WeakMap没有遍历方法，不能被遍历
    const k1 = [1, 2, 3];
    const k2 = [4, 5, 6];
    const map = new WeakMap([[k1, 'foo'], [k2, 'bar']]);
    map.size;//undefined
    map.keys()//TypeError: map.keys is not a function

### WeakMap的使用场景 ###

> 借助WeakMap键名对象都是弱引用这一特点，WeakMap 可用于把 DOM 节点作为键名，当DOM节点被删除后，WeakMap内部的引用便会自动消失，可以有效的解决内存泄漏问题。来看一个小案例

let wmap= new WeakMap();
    wmap.set(
      document.getElementById('map'),
      { clickedTimes: 0});
    
    document.getElementById('map').addEventListener('click', function() { 
      let obj = wmap.get(document.getElementById('map'));
      obj.clickedTimes++;
    }, false);

> 如上代码，我们将map节点对象作为WeakMap的键名，然后我们将存有点击次数的对象作为键值存放于WeakMap中，每当发生一次click事件，就更新一下状态，一旦这个 DOM 节点删除，该状态就会自动消失，不存在内存泄漏风险。

### 总结 ###

> 好了小伙伴们，关于WeakMap数据结构就分享到这里。至此关于ES6中Set和Map的数据结构就全部分享完了，感谢大家的关注和至此。
> 
> 喜欢的小伙伴欢迎点赞评论加关注哦！