详解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语言的更大进步!

        

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/309820.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Kettle Local引擎使用记录(一)(基于Kettle web版数据集成开源工具data-integration源码)

Kettle Web 📚第一章 前言📚第二章 demo源码📗pom.xml引入Kettle引擎核心文件📗java源码📕 controller📕 service📕 其它📕 maven settings.xml 📗测试📕 测试…

Opencv实验合集——实验七:二维码和条形码匹配

1.概念 二维码(QR码) 概念: 二维码是一种矩阵式的二维条码,由黑白方块组成,可以存储大量的信息,包括文本、链接、数字等。QR码的编码方式是在矩阵中通过不同的黑白方块组合表示不同的信息。 特点&#xf…

PHP开发日志 ━━ 不同方法判断某个数组中是否存在指定的键名,测试哪种方法效率高

我们可以用isset($arr[a]) 或者 array_key_exists(a, $arr) 来判断a键名是否存在与$arr数组。 那么这两种方式哪个运行速度快呢? 不多废话了,现在我们写一段代码来测试一下: $array [a > 1, b > 2, c > 3];$start microtime(tru…

图像去雨-雨线清除-图像处理(计算机视觉作业-附代码)

图像去雨是一种图像处理技术,可以通过算法的方式去除图像中的雨滴或雨线等噪声。在实际应用中,图像去雨技术可以提高图像质量,使得图像更加清晰、自然、易于识别和理解。 通常,图像去雨技术基于计算机视觉和深度学习等技术&#…

算法与数据结构--最小生成树算法

一.应用的场景 类似于这种最小成本问题,实际上就是计算加权图把所有点连起来权重之和最小值的时候是怎么连接的。类似的问题还有最短耗时之类的问题。 二.最小生成树的定义 生成树: 图的生成树是它的一颗含有其所有顶点的无环连通子图。 【简单说就是所…

作业帮基于 DolphinScheduler 的数据开发平台实践

摘要 随着任务数量、任务类型需求不断增长,对我们的数据开发平台提出了更高的要求。本文主要分享我们将调度引擎升级到 Apache DolphinScheduler 的实践经验,以及对数据开发平台的一些思考。 1. 背景 首先介绍下我们的大数据平台架构: 数据…

在vue3+vite中使用svg-sprite-loader,antdv修改菜单icon

1. 安装 npm install vite-plugin-svg-icons -D 2. 在vite.config.js的plugins中添加配置项 import { createSvgIconsPlugin } from vite-plugin-svg-icons;createSvgIconsPlugin({iconDirs: [resolve(process.cwd(), src/components/svgIcon/svg)], // icon存放的目录&…

【Emgu.CV教程】4.4、无缝融合应用之TextureFlattening()纹理扁平化

这是无缝融合应用的最后一篇,TextureFlattening()函数,专门用于对图像指定部位进行纹理扁平化的。这个功能现在讲起来有点太早了,应该放到《图像的空间滤波--平滑》这一章节中才合适。因为它就是用Sobel算子进行平滑,也就是在保留…

API(Date类,SimpleDateFormat类,Calendar类,JDK8时间相关类,包装类,算法小题)

文章目录 【常用API】今日内容教学目标 第一章 Date类1.1 Date概述1.2 Date常用方法 第二章 SimpleDateFormat类2.1 构造方法2.2 格式规则2.3 常用方法2.4 练习1(初恋女友的出生日期)2.5 练习2(秒杀活动) 第三章 Calendar类3.1 概述3.2 常用方法3.3 get方法示例3.4 set方法示例…

EI级 | Matlab实现VMD-TCN-LSTM变分模态分解结合时间卷积长短期记忆神经网络多变量光伏功率时间序列预测

EI级 | Matlab实现VMD-TCN-LSTM变分模态分解结合时间卷积长短期记忆神经网络多变量光伏功率时间序列预测 目录 EI级 | Matlab实现VMD-TCN-LSTM变分模态分解结合时间卷积长短期记忆神经网络多变量光伏功率时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.【E…

CSS3实现轮播效果

在我们不使用JS的情况下&#xff0c;是否也可以实现轮播功能呢&#xff1f; 答应是可以的 上代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>轮播</title><style>.boss…

⭐Unity 将电脑打开的窗口画面显示在程序中

1.效果&#xff1a; 下载资源包地址&#xff1a; Unity中获取桌面窗口 2.下载uWindowCapturev1.1.2.unitypackage 放入Unity工程 3.打开Single Window场景&#xff0c;将组件UwcWindowTexture的PartialWindowTitle进行修改&#xff0c;我以腾讯会议为例 感谢大家的观看&#xf…

QT开发 2024最新版本优雅的使用vscode开发QT

▬▬▬▬▬▶VS开发QT◀▬▬▬▬▬ &#x1f384;先看效果 &#x1f384;编辑环境变量 如图添加环境变量&#xff01;&#xff01;&#xff01; 东西全在QT的安装目录&#xff01;&#xff01;&#xff01; 找到的按照我的教程再装一次&#xff01;&#xff01;&#xff01; 点…

如何给AVR16芯片解锁

AVRM16核心板本身集成了强大的芯片自解锁功能模块&#xff0c;当由于熔丝位设置错误&#xff0c;导致芯片锁死&#xff0c;无法正常使用时候&#xff0c;可以利用畅学AVR16核心板上的解锁功能给芯片解锁。 &#xff08;如果芯片没有锁死&#xff0c;可以跳过此步骤&#xff09…

yolov5无人机视频检测与计数系统(创新点和代码)

标题&#xff1a;基于YOLOv5的无人机视频检测与计数系统 摘要&#xff1a; 无人机技术的快速发展和广泛应用给社会带来了巨大的便利&#xff0c;但也带来了一系列的安全隐患。为了实现对无人机的有效管理和监控&#xff0c;本文提出了一种基于YOLOv5的无人机视频检测与计数系…

排序之插入排序

在计算机科学中&#xff0c;排序算法是一种将一组元素按照某种特定顺序排列的方法。插入排序是一种简单且易于理解的排序算法&#xff0c;它的基本思想是将一个记录插入到已经排好序的有序表中&#xff0c;从而得到一个新的、记录数增1的有序表。 基本思想 插入排序的基本思想…

Ubuntu 20.04 Intel RealSense D435i 相机标定教程

下载编译code_utils mkdir -p ~/imu_catkin_ws/src cd ~/imu_catkin_ws/src catkin_init_workspace source ~/imu_catkin_ws/devel/setup.bash git clone https://github.com/gaowenliang/code_utils.git cd .. catkin_make报错&#xff1a;sumpixel_test.cpp:2:10: fatal err…

计算机网络 物理层

文章目录 物理层物理层的基本概念数据通信的基础知识数据通信系统的模型有关信道的几个基本概念信道的极限容量 物理层下面的传输媒体导引型传输媒体非引导型传输媒体 信道复用技术波分复用码的复用 宽带接入技术ADSL 技术光纤同轴混合网 (HFC 网&#xff09;FTTx 技术 物理层 …

基于sprinmgboot实习管理系统源码和论文

随着信息化时代的到来&#xff0c;管理系统都趋向于智能化、系统化&#xff0c;实习管理也不例外&#xff0c;但目前国内仍都使用人工管理&#xff0c;市场规模越来越大&#xff0c;同时信息量也越来越庞大&#xff0c;人工管理显然已无法应对时代的变化&#xff0c;而实习管理…

新生儿成长的阳光之钙:补充注意事项指南

引言&#xff1a; 钙是新生儿骨骼发育不可或缺的重要元素&#xff0c;对于宝宝的生长发育起着至关重要的作用。本文将深入探讨钙的功能、补充时机&#xff0c;以及在给新生儿补充钙时应该注意的事项&#xff0c;为小天使们提供最贴心的呵护。 第一部分&#xff1a;钙的重要性与…