js中WeakMap的实际用处

最新推荐文章于 2025-09-23 11:15:03 发布

原创最新推荐文章于 2025-09-23 11:15:03 发布 · 687 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #es6

技术随笔专栏收录该内容

16 篇文章

订阅专栏

本文探讨了如何使用WeakMap解决JavaScript中因DOM元素与Map关联导致的内存泄漏问题。通过将数据存储在WeakMap中，可以确保对象在不再被强引用时能够被正确回收，从而优化内存管理。示例代码展示了如何用WeakMap替换Map来避免按钮DOM元素的内存泄漏。

放在WeakMap中的对象都是弱引用，在实际应用的时候可以防止对象无法被回收

比如以下代码

let map = new Map();
let button = document.querySelector('#login');
map.set(button, {disabled: true});

这样会导致按钮的Dom无法回收

用WeakMap可以解决该问题

let weakMap = new WeakMap();
let button = document.querySelector('#login');
weakMap.set(button, {disabled: true});

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

mmmMMM12345

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

JavaScript内核与高级编程之：`JavaScript`的`WeakMap`和`WeakSet`：它们在缓存和内存管理中的应用。

weixin_41455464的博客

08-26

128

想象一下，你有一个 DOM 元素，你想给它关联一些数据，比如它的状态、配置等等。如果你直接把这些数据添加到 DOM 元素上，可能会污染 DOM 元素，而且当 DOM 元素被移除时，这些数据也可能无法自动清理。原始类型的值（例如数字、字符串、布尔值等）会被直接存储在栈内存中，而不是堆内存中，因此无法被弱引用。：是一种键值对的集合，类似于咱们的字典，你可以通过键来快速找到对应的值。的目的是为了存储对象的元数据或跟踪对象的存在，而不是为了存储一组数据。：是一种值的集合，类似于咱们的集合，里面的值都是唯一的。

JavaScript内核与高级编程之：`JavaScript` 的 `WeakMap` 与 `Object`：其在键值对存储中的性能对比。

weixin_41455464的博客

08-27

446

你需要记录谁欠你多少钱，商品的价格是多少，用户的各种信息等等。根据你的实际需求，选择合适的工具，才能让你的代码更加精彩！一直扮演着“账本”的角色，但随着 JavaScript 的发展，我们有了更高级的“账本”——非常适合存储与 DOM 元素相关的元数据，或者存储对象的私有属性，而不用担心内存泄漏的问题。但是，需要注意的是，这个性能差异通常只有在处理非常大量的数据时才会显现出来。有了更深入的了解，能够在实际开发中灵活运用它们，写出更高效、更安全的代码！的主要用途是跟踪对象的存在状态，例如，你可以使用。

参与评论您还未登录，请先登录后发表或查看评论

WeakMap有什么使用场景？

王铁柱666的博客

10-25

285

在前端开发中，经常需要为DOM元素添加事件监听器。WeakMap可以用于存储和管理这些监听器，确保当DOM元素不再存在时，与其相关联的监听器也会被自动清除。总的来说，WeakMap在前端开发中的使用场景主要集中在需要关联数据与DOM元素、管理事件监听器、存储私有属性以及避免深拷贝死循环等方面。这意味着开发者可以使用WeakMap来安全地存储对象的私有数据，而无需担心这些数据在不再需要时仍然占用内存。WeakMap可以用于记录已经拷贝过的对象，从而在遇到循环引用时终止拷贝过程，避免死循环的发生。

Map与 WeakMap 及WeakMap的主要作用

shuxiaoxii的博客

11-10

681

概念 ES6 提供了 Map 数据结构. 它类似与对象,也是键值对的集合. 但是 ‘键’ 的范围不限于字符串,各种类型的值(包括对象) 都可以当作键. Map 也实现了 Iterator接口, 所以可以使用扩展运算符和 for...of... 进行遍历. Map 键值对的集合是对键去重. 值可以是重复的. Map 的属性和方法如果存在相同的键，则会按照FIFO（First in First Out,先进先出）原则，后面的键值信息会覆盖前面的键值信息。 1. size属性: 返回Map的元素的

JS中90%的人都没有用到的类型 WeakMap

最新发布

qq_51145696的博客

09-23

639

WeakMap是JavaScript为解决内存泄漏问题设计的弱引用键值集合，与Map的核心区别在于其键是弱引用，不会阻止对象被垃圾回收（GC）。典型使用场景包括：1）关联DOM元素元数据（元素移除时自动清理）；2）对象参数的memoization缓存；3）模拟类私有字段。WeakMap不支持遍历或获取大小，仅提供get/set/has/delete等基础API。需注意：键必须是对象，回收时机由GC决定（非即时），不可替代必须手动清理的关键逻辑。适用场景为需自动管理对象绑定数据的场景，如临时缓存或元数

es6 WeakMap

歪脖先生的博客

01-26

654

WeakMap 含义 WeakMap结构与Map结构类似，也是用于生成键值对的集合。 // WeakMap 可以使用 set 方法添加成员const wm1 = new WeakMap();const key = {foo: 1};wm1.set(key, 2);wm1.get(key) // 2// WeakMap 也可以接受一个数组，// 作为构造函数的参数const k1 =

new WeakMap()的特点与应用

weixin_69877464的博客

03-03

798

WeakMap是一种特殊的映射，键必须是对象，且对键的引用是弱引用。它常用于存储与对象相关的私有数据或缓存数据，而不会阻止对象被垃圾回收。与Map不同，WeakMap没有遍历方法，也不支持原始值作为键。使用WeakMap可以有效避免内存泄漏问题。

JavaScript WeakMap

白瑕的博客

01-24

1877

我在处理一个复杂对象的深拷贝方法时接触到WeakMap, 其作为缓存结构以解决对象内部的循环引用问题. 为了改造这个方法, 决定研究WeakMap。

ES6 WeakMap和WeakSet的使用场景

weixin_30258027的博客

11-17

222

JavaScript垃圾回收是一种内存管理技术。在这种技术中，不再被引用的对象会被自动删除，而与其相关的资源也会被一同回收。 Map和Set中对象的引用都是强类型化的，并不会允许垃圾回收。这样一来，如果Map和Set中引用了不再需要的大型对象，如已经从DOM树中删除的DOM元素，那么其回收代价是昂贵的。为了解决这个问题，ES6还引入了另外两种新的数据结构，即称为WeakMap和WeakSet...

详解JavaScript中的WeakMap和WeakSet

爱蹦跶的全栈大A阿

01-11

1258

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

29、JavaScript中的WeakMap、WeakSet、Typed Arrays与DataView

food6的博客

06-16

本文深入探讨了JavaScript中的WeakMap、WeakSet、Typed Arrays和DataView四种数据结构。WeakMap和WeakSet通过弱引用机制有效避免内存泄漏，适用于对象相关数据缓存和标记。Typed Arrays提供高效的数值数组处理能力，适用于图像、音频、数值计算等高性能需求场景。DataView则解决了多字节数据读写时的字节序问题，适用于网络数据或文件数据的二进制处理。文章结合代码示例和性能优化建议，帮助开发者更好地理解和应用这些高级数据结构，提升代码效率与内存管理能力。

WeakHashMap的作用 , Talk is cheap, Show you code.

李岳锋的专栏

12-22

1482

WeakHashMap 与HashMap的区别，很简单。就是WeakHashMap的Key的对象，如果除了自身有对key的引用外(意思就是没有其它外部引用 )，那么，这个Key和Value，就会被自动删除掉，而HashMap的则不会。下面的代码，复制粘贴即可运行，注释也到位，自己花点时间就能懂了。备注一下: 可以将 obj = null; 这一行注释掉//obj = null;。然后，将Th...

ES6 WeakMap的实际用途是什么？

asdfgh0077的博客

06-04

841

What are the actual uses of the WeakMap data structure introduced in ECMAScript 6? ECMAScript 6中引入的

什么是 JavaScript 中的 WeakMap

weixin_59525879的博客

12-30

637

与 Map 不同的是，WeakMap 的键只能是对象，不能是其他类型的值。弱引用的特性使得 WeakMap 在某些情况下非常有用，比如在需要将一些额外的数据与一个对象关联起来但又不希望影响到垃圾回收的场景下。需要注意的是，由于 WeakMap 的键只能是对象，因此不能使用原始类型的值作为键，比如字符串、数字等。如果需要使用字符串或数字作为键，应该使用普通的 Map 数据结构。在 JavaScript 中，WeakMap 是一种特殊的 Map 数据结构，它允许将对象作为键，而且键值对是弱引用的关系。

js WeakMap用法

RayShyy的博客

03-02

1980

介绍 ECMAScript 6 新增的“弱映射”（WeakMap）是一种新的集合类型，为这门语言带来了增强的键/值对存储机制。WeakMap 是 Map 的“兄弟”类型，其 API 也是 Map 的子集。WeakMap 中的“weak”（弱），描述的是 JavaScript 垃圾回收程序对待“弱映射”中键的方式。基本API 1. 创建可以使用 new 关键字实例化一个空的 WeakMap： const wm = new WeakMap(); 注意：弱映射中的键只能是 Object 或者继承自 Obje

第十七节：ES6新增的Map和WeakMap 又是什么东西？

qq_24520459的博客

07-18

258

上节介绍了Set和WeakSet，这节咱就讲Map和WeakMap是什么？当然，两者之前并没什么必然的联系，仅仅是用法类似。什么是Map介...

ES6 WeakMap 基础详解

前端梦工厂

10-10

1640

WeakMap 是 JavaScript 中的一种数据结构，它与普通的 Map 有些相似，但也有一些重要的区别。它的特点在于它能够实现弱引用关联，并且只能存储对象作为键名。具体而言，WeakMap 中的键名必须是对象，而值则可以是任意类型的数据。与普通的 Map 不同，WeakMap 中的键名是弱引用的，也就是说，当键名所指向的对象在其他地方被清除时，WeakMap 中对应的键值对也会自动被清除。到这里，我们应该已经了解了 JavaScript 中的 WeakMap 数据结构的基本操作和注意事项。

（翻译）Weakmap详解

技术无止境，人生仍探索。

12-11

9327

先看一个例子 let obj = { name: 'toto' } // { name: 'toto' }这个对象能够被读取到，因为obj这个变量名有对它的引用 // 将引用覆盖掉 obj = null // 这个对象将会被从内存中移除，因为我们已经失去了对它所有的引用再来看另外一个例子 let obj = { name: 'toto' } let arr = [ obj ] obj = null 在这个例子中，对象{name:'toto'}不会被从内存中移除，因为数组arr保存了对它的引用

JavaScript中的Set、Map、WeakSet、WeakMap详解

在所有的事情背后，要有一颗坚定的的本心，要有一颗应对变革和提升自我的本心，世界瞬息万变，本心要坚持到底，保持学习，时刻复盘

04-28

1784

Set是ES6引入的一种新的数据结构，它允许我们存储任何类型的数据，但每个元素只能出现一次。换句话说，Set中的元素是唯一的，不允许有重复值。Map也是ES6引入的一种新的数据结构，它允许我们存储键值对（key-value pairs）。与普通对象不同，Map的键可以是任意数据类型，包括对象、函数等。WeakSet与Set类似，但它存储的引用是弱引用。这意味着如果WeakSet中引用的某个对象没有其他强引用指向它，垃圾回收机制可能会回收该对象，而不会考虑它是否存在于WeakSet中。