JS WeakMap 什么时候用?

简介: JS WeakMap 什么时候用?

image.png

减轻阅读负担,启发创作心智,轻松学习 JavaScript 技巧,日拱一卒,jym,冲~


map 大家都很熟悉了,WeakMap 听说过吗?听这个名字就很“弱”的,别误会,它不是“弱”,而是容易被清理


举个栗子:

let john = { name: "John" };
let array = [ john ];
john = null; // 覆盖引用
console.log(array[0]) // {name: 'John'}


我们声明了一个 john 对象,然后在数组里面引用了它,然后再尝试清空它, john = null,然后再访问:array[0],结果发现,仍然能成功打印。


这说明 array 对 对象 john 的引用,导致内存无法正常清理。

image.png


WeakMap 就是来解决这个问题的:


对比 2 组代码,分别是 map 和 weakMap 在这个问题下的表现:

  • Map
let john = { name: "John" };
let map = new Map();
map.set(john, "...");
john = null; // 覆盖引用
console.log(map.keys()) // 仍然能访问
// john 被存储在了 map 中,
// 我们仍可以使用 map.keys() 来获取它

image.png


  • WeakMap
let john = { name: "John" };
let weakMap = new WeakMap();
weakMap.set(john, "...");
john = null; // 覆盖引用
console.log(weakMap.has(john))
// john 被从内存中删除了!
复制代码

image.png


WeakMap 中使用一个对象作为键,并且没有其他对这个对象的引用 —— 该对象将会被从内存(和map)中自动清除。


  • 此外特别说明:WeakMap 和 Map 的很重要的不同点就是,WeakMap 的键必须是对象,不能是原始值。


WeakMap 不支持迭代以及 keys(),values() 和 entries() 方法。所以没有办法获取 WeakMap 的所有键或值。


另外 WeakMap 只有以下的方法:weakMap.get(key)、weakMap.set(key, value)、weakMap.delete(key)、weakMap.has(key)


所以 WeakMap 的主要优点是它们对对象是弱引用,被它们引用的对象很容易地被垃圾收集器移除。但这是以不支持一些对象方法为代价换来的~

没有优劣之分,按需所取罢了~~


相关文章
|
7月前
|
存储 JavaScript 前端开发
【JavaScript】Set、Map、WeakSet、WeakMap
Set、Map、WeakSet和WeakMap是ES6引入的新的数据结构,它们在处理数据时具有不同的特性和用途。本文将详细介绍它们的用法、特性、区别、优缺点以及使用场景和注意事项,并给出相应的代码示例
96 0
|
7月前
|
存储 JavaScript 前端开发
理解JavaScript中的WeakSet和WeakMap
理解JavaScript中的WeakSet和WeakMap
|
7月前
|
存储 缓存 JavaScript
javascript中的WeakMap和WeakSet
javascript中的WeakMap和WeakSet
|
7月前
|
存储 缓存 JavaScript
什么是 JavaScript 中的 WeakMap
什么是 JavaScript 中的 WeakMap
55 0
|
JavaScript 前端开发 Java
带你读《现代Javascript高级教程》十二、深入理解JavaScript中的WeakMap和WeakSet(1)
带你读《现代Javascript高级教程》十二、深入理解JavaScript中的WeakMap和WeakSet(1)
|
存储 JavaScript 前端开发
带你读《现代Javascript高级教程》十二、深入理解JavaScript中的WeakMap和WeakSet(2)
带你读《现代Javascript高级教程》十二、深入理解JavaScript中的WeakMap和WeakSet(2)
|
JavaScript 前端开发 Java
带你读《现代Javascript高级教程》——深入理解JavaScript中的WeakMap和WeakSet(1)
带你读《现代Javascript高级教程》——深入理解JavaScript中的WeakMap和WeakSet
|
前端开发 JavaScript
html标签的tabindex属性?css变量和js更改变量?ES6新增特性Map/WeakMap和Set/WeakSet
tabindex 属性规定元素的 tab 键控制次序(当 tab 键用于导航时)。
|
存储 JavaScript Java
聊一聊JS中WeakMap与WeakSet的渣男特性
有一天,恶霸在实验室里卷代码,突然有一个学妹抱着电脑来找我,问我WeakMap和WeakSet与Set和Map的主要区别是什么,这我就提起兴致了,趁这个机会给学妹普及一下渣男的性质
114 1
|
JavaScript 前端开发 Java
JavaScript中Map与WeakMap类型
JavaScript中Map与WeakMap类型