WeakMap 与 WeakSet

news/2024/7/10 23:39:17 标签: 前端, es6

WeakSet

WeakSet 结构与 Set 类似,也是不重复的值的集合。

成员都是数组和类似数组的对象,WeakSet 的成员只能是对象,而不能是其他类型的值。

若调用 add() 方法时传入了非数组和类似数组的对象的参数,就会抛出错误


const b = [1, 2, [1, 2]]
new WeakSet(b) // Uncaught TypeError: Invalid value used in weak set
  • 成员都是弱引用,可以被垃圾回收机制回收,可以用来保存 DOM 节点,不容易造成内存泄漏
  • WeakSet 不可迭代,因此不能被用在 for-of 等循环中。
  • WeakSet 没有 size 属性。

WeakSet 不能遍历,是因为成员都是弱引用,随时可能消失,遍历机制无法保证成员的存在,很可能刚刚遍历结束,成员就取不到了。


WeakMap

WeakMap 结构与 Map 结构类似,也是用于生成键值对的集合。

  • 只接受对象作为键名(null 除外),不接受其他类型的值作为键名
  • 键名是弱引用,键值可以是任意的,键名所指向的对象可以被垃圾回收,此时键名是无效的
  • 可被垃圾回收,不能遍历,也没有 size 属性,方法有 getsethasdelete

注意

WeakMap 弱引用的只是键名,而不是键值键值依然是正常引用(如下)

const wm = new WeakMap();
let key = {};
let obj = {foo: 1};

wm.set(key, obj);
obj = null;
wm.get(key)
// Object {foo: 1}

上面代码中,键值 obj 是正常引用。所以,即使在 WeakMap 外部消除了obj 的引用,WeakMap 内部的引用依然存在。(注意和下面的对比)


const wm1 = new WeakMap();
let obj1 = {a: 1};
let value1 = 2;
wm1.set(obj1, value1);
wm1.get(obj1);  //  2
obj1 = {};  或者  obj1 = null;
wm1.get(obj1);  //  undefined
wm1;  (结果如下图)

把键名 obj1 赋空值之后,不可以通过 wm1.get(obj1); 获取到正确的键值 value1

但是打印 wm1 发现,之前保存的 键名和键值 依旧存在且正确


弱引用

WeakSet 中的对象都是弱引用,即垃圾回收机制不考虑 WeakSet 对该对象的引用,也就是说,如果其他对象都不再引用该对象,那么垃圾回收机制会自动回收该对象所占用的内存,不考虑该对象还存在于 WeakSet 之中

  • 弱引用:垃圾回收机制有一套自己的回收算法,我们都知道一个函数执行完成后该函数在调用栈中创建的执行上下文会被销毁,这里说的销毁,其实指的就是执行上下文中环境变量、词法变量中的数据存储所占据的内存空间被垃圾回收机制所回收,那么垃圾回收机制不考虑 WeakSet 对该对象的引用 是不是就意味着垃圾回收机制不会回收 WeakSet 对象里面的数据所占据的内存呢? 不!不是的!代码是最好的解释
let obj = {name:'kirara'}
let ws = new WeakSet()
ws.add(obj)
obj = null
console.log(ws)  //WeakSet{}

用 ws 中存放一个对象,然后再将该对象置为 null,(一个变量被置为 null,就意味着这个变量的内存可以被回收了)只要 WeakSet 结构中的对象不再需要被引用,那么 WeakSet 就直接为空了,就意味着 WeakSet 中的数据所占据的内存被释放了, Set 结构不会如此(如下)

let obj = {name:'kirara'}
let s  =new Set()
s.add(obj)
obj = null
console.log(s) 
//  value: {name: "kirara"}

WeakSet 使用场景

储存 DOM 节点,而不用担心这些节点从文档移除时,会引发内存泄漏

<div id="wrap">
    <button id='btn'>确定</button>
</div>

<script>
    let wrap = document.getElementById('wrap')
    let btn = document.getElementById('btn');

    // 假如想给这个btn打上“禁用”标签,选择把它存放在 WeakSet结构中
    const disabledElements = new WeakSet();
		disabledElements.add(btn);
     btn.addEventListener('click', () => {
         wrap.removeChild(btn)
     })
</script>

这里当 button 被移除,disabledElements 中的内容会因为是弱引用而直接变成空

也就是 disabledElements 被垃圾回收掉了其中的内存,避免了一个小小的内存泄漏的产生


文章如有错误,恳请大家提出问题,本人不胜感激 。 不懂的地方可以评论,我都会 一 一 回复

文章对大家有帮助的话,希望大家能动手点赞鼓励,大家未来一起努力 长路漫漫,道阻且长


http://www.niftyadmin.cn/n/277196.html

相关文章

numpy.linalg--线性代数基础

numpy.linalg–线性代数基础 NumPy提供了线性代数函数库linalg&#xff0c;该库包含了线性代数所需的所有功能&#xff0c;可以看看下面的说明。 方法注释dot两数组的点积vdot两向量的点积inner两数组的内积determinant数组的行列式matmul两数组的矩阵积inv求矩阵的逆solve求…

JSP+SQL基于JSP的学生信息管理系统(源代码+论文+答辩PPT)

随着学校规模的不断扩大&#xff0c;学生数量急剧增加&#xff0c;有关学生的各种信息也成倍增长。面对如此庞大的信息量&#xff0c;开发学生信息管理系统来提高学生管理工作的效率就成为必然。通过该系统&#xff0c;可以做到信息的规范管理、科学统计和快速查询&#xff0c;…

代码随想录Day64(一刷完结)

今天学习单调栈解决最后一道题 84.柱状图中的最大矩形 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。 求在该柱状图中&#xff0c;能够勾勒出来的矩形的最大面积。 示例 1: 输入&#xff1a;heights [2,1,5,6,…

Python每日一练(20230430)

目录 1. 移除元素 &#x1f31f; 2. 删除排序链表中的重复元素 &#x1f31f; 3. 搜索旋转排序数组 II &#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏 Java每日一练 专栏 1.…

C/C++每日一练(20230430)

目录 1. 分割回文串 &#x1f31f;&#x1f31f; 2. 六角填数 ※ 3. 查找书籍 &#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏 Java每日一练 专栏 1. 分割回文串 给你一个字符串 s&#x…

DDD系列:五、实际项目应用

引言 DDD的设计目标是什么&#xff1f;解决了什么问题&#xff1f; Domain-Driven Design 是一种软件/应用结构设计方法论&#xff0c;它把 领域模型的重要性提高到了数据模型之上&#xff0c;用于应对复杂且多变的业务。 DDD的设计目标是&#xff0c;将软件设计与业务领域模型…

Python小姿势 - # Python网络爬虫之如何通过selenium模拟浏览器登录微博

Python网络爬虫之如何通过selenium模拟浏览器登录微博 微博登录接口很混乱&#xff0c;需要我们通过selenium来模拟浏览器登录。 首先我们需要安装selenium&#xff0c;通过pip安装&#xff1a; pip install selenium 然后我们需要下载一个浏览器驱动&#xff0c;推荐使用Ch…

ChatGPT技术原理 第十章:评价指标和测试方法

目录 10.1 自动评价指标 10.2 人工评价指标 10.3 测试方法 评价指标和测试方法是评估对话生成模型性能的重要工具。在对话生成任务中,我们需要使用一些评估指标来评估生成的响应的质量。常用的评估指标包括自动评估指标和人工评估指标。而测试方法则是用来评估模型在测试集上…