详解JavaScript中的WeakMap和WeakSet

🧑?🎓 个人主页：《爱蹦跶的大A阿》

🔥当前正在更新专栏：《VUE》?、《JavaScript保姆级教程》、《krpano》

??

? 前言

????????内存管理一直是JavaScript这门语言中的难点和痛点。由于其自动垃圾回收机制的限制,在某些场景下很容易出现内存泄漏,影响页面性能。 ES6中新增的WeakMap和WeakSet填补了这方面的短板,提供了一种实现弱引用的方法,可以更精细地控制对象的生命周期。这两个特殊的数据结构为我们处理那些只在某个时间段内需要的对象引用,提供了极大的便利。

????????正确使用WeakMap和WeakSet可以优化内存占用,减少内存泄漏的问题。本文将深入解析WeakMap和WeakSet的原理、用法及实际应用场景,帮助读者全面理解这两个强大的数据结构的设计思想和用途,在实际项目中合理使用,编写更健壮的JavaScript程序。

?

? 正文

一、WeakMap和WeakSet介绍

????????WeakMap和WeakSet都属于ES6新增的弱引用数据结构。

????????WeakMap是一个类似Map的集合,但其中的键名是一个弱引用。 WeakSet是一个类似Set的集合,但其中的值是一个弱引用。

二、WeakMap的特点和用法

1. WeakMap只接受对象作为键名(null除外),不接受其他类型的值作为键名。这是因为它的键名是一个弱引用,需要一个对象实例来引用。
2. WeakMap的键名所指向的对象是弱引用关系,如果该对象在其他地方被回收,那么该键名也会自动消失。
3. WeakMap的键名是不可枚举的。
4. WeakMap的键值对都是不可遍历的。
5. WeakMap可以有效防止内存泄露。当WeakMap中某个键名对象不再需要时,会被JS引擎的垃圾回收机制自动回收。

????????WeakMap的键名必须是一个对象,不能是其他类型的值。

????????WeakMap中的键名是弱引用,如果没有其他的对键名的引用,那么垃圾回收机制会自动回收该键名占用的内存。

WeakMap的API:

• new WeakMap() 创建WeakMap
• weakMap.set(key, value) 设置键名和键值
• weakMap.get(key) 根据键名获取键值
• weakMap.has(key) 判断是否包含键名
• weakMap.delete(key) 删除键名和键值

代码示例:

let weakMap = new WeakMap()
let obj = {name: '张三'}

weakMap.set(obj, 'hello') 

weakMap.get(obj) // "hello"

obj = null // 自动回收obj
weakMap.get(obj) // undefined

????????上面代码中,我们通过WeakMap构造函数创建了一个WeakMap对象weakMap,然后以一个对象obj为键名,设置了一个键值,当obj被置为null时,WeakMap中的该键值对也会被自动回收。?

三、WeakSet的特点和用法

????????WeakSet的值必须是一个对象,不能是其他类型的值。

????????WeakSet中的值是弱引用,如果没有其他的对值的引用,那么垃圾回收机制会自动回收该值占用的内存。

WeakSet的API:

• new WeakSet() 创建WeakSet
• weakSet.add(value) 添加值
• weakSet.has(value) 判断是否包含某值
• weakSet.delete(value) 删除某值

代码示例:

const ws = new WeakSet();

let obj = {};
ws.add(obj);

ws.has(obj); // true

// 当obj设置为null后,WeakSet中的值会被垃圾回收  
obj = null;

四、WeakMap和WeakSet的区别

• WeakMap的键名必须是一个对象,WeakSet的值必须是一个对象
• WeakMap中的键名是弱引用,WeakSet中的值是弱引用
• WeakMap有set、get、has、delete方法,WeakSet只有add、has、delete方法
• WeakMap不可迭代,WeakSet是可迭代的

五、WeakMap和WeakSet的使用场景

• WeakMap适合临时存放一组键值对,其中键名可以自动回收内存
• WeakSet适合保存多个对象,而不用担心对象引用问题
• Vue中的组件缓存使用WeakMap实现
• React中useEffect的deps使用WeakSet实现

六、WeakMap和WeakSet的兼容性

WeakMap和WeakSet都是ES6引入的,兼容性如下:

• IE不支持
• Chrome 36+
• Firefox 6+
• Safari 9+
• Node.js 6+

可以通过polyfill提高兼容性

?

? 结语

????????WeakMap和WeakSet的出现使JavaScript这门语言的表达能力又上了一个台阶,基于弱引用的设计可以解决一些内存管理方面的痛点。但同时也需要我们注意适用场景,不可滥用,才能发挥其最大效能。

????????本文全面介绍了WeakMap和WeakSet这两个新的数据结构在JavaScript中的用法。希望这些知识可以帮助大家在编码中写出性能更优、稳定性更强的应用程序。让我们共同期待JavaScript语言的更大进步!

? ? ? ??

?