当前位置: 首页 > news >正文

JavaScript特殊集合WeakMap 的使用及场景介绍

WeakMap 是 JavaScript 中的一种特殊集合类型,主要用于存储键值对,但其特性与普通 Map 有显著区别,尤其适合特定场景。以下是其具体使用细节:

核心特性

1.键必须是对象

WeakMap 的键只能是对象(null 除外),不能是原始值(如字符串、数字、布尔值),否则会报错。

const wm = new WeakMap();
wm.set({name: 'a'}, 1); // 有效
wm.set('key', 2); // 报错:TypeError

2.弱引用键

  • 对键的引用是 “弱引用”:如果外部没有其他强引用指向该键对象,垃圾回收机制会自动回收该对象,同时 WeakMap 中对应的键值对也会被移除(无需手动删除)。
  • 这意味着无法遍历 WeakMap(没有 keys()、values()、entries() 方法,也没有 size 属性),因为键可能随时被回收,无法保证遍历的完整性。

常用方法

set(key, value):添加键值对,返回 WeakMap 实例(可链式调用)。

get(key):根据键获取对应值,若键不存在则返回 undefined。

has(key):判断是否存在该键,返回布尔值。

delete(key):删除指定键值对,返回布尔值(成功删除为 true)。

典型使用场景

1.存储对象的私有数据

避免直接在对象上添加属性(可能污染对象),用 WeakMap 关联对象与私有数据,且不会阻碍对象被回收。

const privateData = new WeakMap();class MyClass {constructor(id) {// 用实例对象作为键,存储私有数据privateData.set(this, { id: id, secret: 'xxx' });}getSecret() {return privateData.get(this).secret; // 通过实例获取私有数据}
}const obj = new MyClass(1);
console.log(obj.getSecret()); // 'xxx'
// 当 obj 被销毁(无强引用),privateData 中对应的键值对会自动消失

2.DOM 元素的附加数据

为 DOM 元素绑定额外数据(如状态、缓存),但不希望影响 DOM 元素的回收。

const domData = new WeakMap();
const div = document.querySelector('div');// 存储数据
domData.set(div, { count: 0, status: 'active' });// 使用数据
console.log(domData.get(div).count); // 0// 当 div 被移除且无其他引用时,domData 中对应数据会自动清除

3.缓存计算结果

缓存基于对象的计算结果,当对象被回收时,缓存自动失效,节省内存。

const cache = new WeakMap();function calculate(obj) {if (cache.has(obj)) {return cache.get(obj); // 命中缓存}const result = /* 复杂计算 */ obj.value * 2;cache.set(obj, result); // 缓存结果return result;
}

注意事项

  • 无法遍历:由于键的弱引用特性,无法像 Map 一样遍历所有键值对,也无法获取长度。
  • 不适合需要持久化或遍历的场景:若需遍历或依赖键的存在性,应使用普通 Map。

WeakMap 的核心价值在于 “弱引用” 带来的自动内存管理,尤其适合关联对象与临时 / 私有数据,避免内存泄漏。

http://www.lryc.cn/news/608089.html

相关文章:

  • 【昇腾推理PaddleOCR】生产级部署方式
  • 什么是AWS Region和AWS Availability Zones
  • php完整处理word中表单数据的方法
  • Word怎样转换为PDF
  • 使用AWS免费EC2自建RustDesk远程桌面连接服务
  • 【iOS】3GShare仿写
  • 市政污水厂变频器联网改造方案-profibus转ethernet ip网关(通俗版)
  • 疏老师-python训练营-Day33 MLP神经网络的训练
  • 详解Python标准库之命令行界面库
  • 【05】OpenCV C#——OpenCvSharp 图像基本操作---转灰度图、边缘提取、兴趣区域ROI,图像叠加
  • MyBatisPlus之CRUD接口(IService与BaseMapper)
  • 西门子 G120 变频器全解析:从认知到参数设置
  • 技巧|SwanLab记录ROC曲线攻略
  • LINUX82 shell脚本变量分类;系统变量;变量赋值;四则运算;shell
  • 系统性学习数据结构-第一讲-算法复杂度
  • MySQL 内置函数
  • ADB 查看 CPU 信息、查看内存信息、查看硬盘信息
  • 排序算法大全:从插入到快速排序
  • k8s使用 RBAC 鉴权
  • 论文阅读笔记:Dataset Condensation with Gradient Matching
  • [C++竞赛]数论
  • 深入 Go 底层原理(十三):interface 的内部表示与动态派发
  • [硬件电路-113]:模拟电路 - 信号处理电路 - 二极管的应用 - 精密整流电路与波形
  • sqli-labs:Less-18关卡详细解析
  • Json Jsoncpp
  • hyper-v实战系列:第一代虚拟机转第二代步骤
  • 深入理解 Docker 容器网络:为什么用 host 网络模式能解决连通性问题?
  • yolo 、Pytorch (5)IOU
  • Git、Gitee、GitHub、GitLab完整讲解:从基础到进阶
  • web:js的模块导出/导入