ES6中的数据结构WeakMap

前言

小伙伴们大家好。前面的我们已经学习了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的数据结构就全部分享完了，感谢大家的关注和至此。

喜欢的小伙伴欢迎点赞评论加关注哦！

ES6中的数据结构WeakMap

前言

WeakMap

WeakMap的使用场景

总结

Guess you like