ES12 中如何使用 WeakSet 和 WeakMap 来避免内存泄露问题
在前端开发中，内存泄露问题是一个常见的问题，尤其是在使用一些比较复杂的数据结构时，比如对象、数组、Set 和 Map 等。在 ES12 中，我们可以使用 WeakSet 和 WeakMap 来避免这个问题，让我们来看一下具体的用法。
什么是 WeakSet 和 WeakMap
在 ES6 中，我们已经了解了 Set 和 Map，它们是对数组和对象的一种增强补充，可以更加方便地操作数据。而 WeakSet 和 WeakMap 则是对 Set 和 Map 的一种增强，专门用于解决内存泄漏的问题。
WeakSet 和 WeakMap 特点：
- WeakSet 和 WeakMap 中的 key 必须是对象类型，且不能使用普通值，否则会报错。
- WeakSet 和 WeakMap 中存储的对象的引用是弱引用，也就是说如果一部分代码引用到了其中的对象，但是其他部分代码已经删除了这个对象的引用，那么这个对象会被垃圾回收机制清理掉。
WeakSet 的使用
我们可以先看一下常规的 Set 用法，比如我们有一个数组，需要去重：
const arr = [1, 1, 2, 3, 4, 4, 5]; const set = new Set(arr); console.log(set);
输出结果： [1, 2, 3, 4, 5]
而如果我们使用 WeakSet，去除数组中的重复元素，则需要这样写：
const arr = [{name: 'bob'}, {name: 'ben'}, {name: 'bob'}];
const weakSet = new WeakSet(arr);
console.log(weakSet);输出结果：WeakSet { {name: 'bob'}, {name: 'ben'} }
在这个过程中，我们不用再手动去重了，只需要将原始数组转化为 WeakSet 即可，不需要额外的代码逻辑，非常方便。
WeakMap 的使用
和 WeakSet 类似，我们也可以通过 WeakMap 来实现内存泄漏问题的避免。在实际开发中，如果需要在一个对象中存储键值对的时候，我们应该优先考虑使用 WeakMap 来避免内存泄漏的问题，而不是使用普通的 Map。
下面我们来看一下 WeakMap 的例子：
let obj = {name: 'bob', age: 20};
const weakMap = new WeakMap();
weakMap.set(obj, 'value');
console.log(weakMap.get(obj)); // value
obj = null;
console.log(weakMap.get(obj)); // undefined在这个例子中，我们创建了一个 WeakMap，并在其中设置了一个键值对，然后销毁了 obj 对象的引用。此时，由于 WeakMap 使用的是弱引用，所以当我们再次尝试访问这个被销毁的对象时，会得到一个 undefined。
总结
通过上面的例子，我们可以看到，使用 WeakSet 和 WeakMap 是一种非常好的避免内存泄漏的方式。在实际项目开发中，我们应该优先使用 WeakSet 和 WeakMap 来存储数据，尤其是在开发一些复杂的业务逻辑的时候，更应该注重每一个细节，保证代码的健壮性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f46ac6f6b2d6eab3d70d80