带你读《现代Javascript高级教程》十二、深入理解JavaScript中的WeakMap和WeakSet(2)

简介: 带你读《现代Javascript高级教程》十二、深入理解JavaScript中的WeakMap和WeakSet(2)

带你读《现代Javascript高级教程》十二、深入理解JavaScript中的WeakMap和WeakSet(1)https://developer.aliyun.com/article/1349618?groupCode=tech_library


3) WeakMap和对象私有数据

WeakMap还常常被用来保存对象的私有数据。这是因为WeakMap的键不可遍历,所以我们可以利用这个特性来存储一些只有特定代码能够访问的数据。

 

例如,我们可以创建一个WeakMap,然后使用这个WeakMap来保存每个对象的私有数据,像这样:

 

let privateData = new WeakMap();
function MyClass() {
  privateData.set(this, {
    secret: 'my secret data',
  });}
MyClass.prototype.getSecret = function() {
  return privateData.get(this).secret;};
let obj = new MyClass();
console.log(obj.getSecret()); // 输出: 'my secret data'

 

在这个例子中,我们创建了一个MyClass的类,每一个MyClass的实例都有一个私有数据secret。我们使用WeakMap来保存这个私有数据。这样,我们就可以在MyClass的方法中访问这个私有数据,但是其他的代码无法访问它。

3. WeakSet深入解析

接下来,我们将更深入地探讨WeakSet的特性和用法。

1)WeakSet的创建和使用

我们可以使用new WeakSet()来创建一个新的WeakSet。在创建了WeakSet之后,我们可以使用add方法来添加新的对象,使用delete方法来移除某个对象,使用has方法来检查WeakSet中是否存在某个对象。

 

let weakSet = new WeakSet();
let obj1 = {};let obj2 = {};
// 添加对象
weakSet.add(obj1);
weakSet.add(obj2);
// 检查对象是否存在
console.log(weakSet.has(obj1)); // 输出: true
console.log(weakSet.has(obj2)); // 输出: true
// 删除对象
weakSet.delete(obj1);
console.log(weakSet.has(obj1)); // 输出: false

2)WeakSet和对象唯一性

WeakSet可以用来检查一个对象是否已经存在。由于WeakSet中的每个对象都是唯一的,所以我们可以利用这个特性来确保我们不会添加重复的对象。

 

例如,我们可以创建一个WeakSet,然后使用这个WeakSet来保存所有我们已经处理过的对象,像这样:

 

let processedObjects = new WeakSet();
function processObject(obj) {
  if (!processedObjects.has(obj)) {
    // 处理对象
    // ...
    // 将对象添加到WeakSet中,表示我们已经处理过这个对象
    processedObjects.add(obj);
  }}

 

在这个例子中,我们在每次处理一个对象之前,都会检查这个对象是否已经被处理过。如果这个对象已经被处理过,我们就不会再处理它。这样,我们就可以确保我们不会重复处理同一个对象。

3) WeakSet和内存管理

WeakMap一样,WeakSet中的对象也是弱引用的,所以WeakSet也有优秀的内存管理特性。如果一个对象只被WeakSet引用,那么这个对象可以被垃圾回收。这样就可以防止因为长时间持有对象引用导致的内存泄漏。

 

例如,如果我们在Set中保存了一些对象的引用,即使这些对象在其他地方都已经不再使用,但是由于它们仍被Set引用,所以它们不能被垃圾回收,这就可能导致内存泄漏。然而,如果我们使用WeakSet来保存这些对象的引用,那么当这些对象在其他地方都不再使用时,它们就会被垃圾回收,从而防止了内存泄漏。

4. 结论

在JavaScript的ES6版本中,引入了WeakMapWeakSet这两种新的数据结构。与MapSet相比,它们有一些特殊的特点和用途,使它们在处理内存泄漏问题、管理对象私有数据、处理对象的唯一性等场景中有显著的优势。理解它们的特性和用法,可以帮助我们更有效地使用JavaScript来编写高效、稳定的代码。

 

相关文章
|
24天前
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
26 2
2024年5月node.js安装(winmac系统)保姆级教程
|
5月前
|
JavaScript
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
216 0
|
2月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
42 4
|
2月前
|
JavaScript 前端开发 Java
Node.js 教程
10月更文挑战第1天
48 0
|
4月前
|
JavaScript NoSQL 前端开发
|
6月前
|
前端开发 JavaScript 安全
高级前端开发需要知道的 25 个 JavaScript 单行代码
1. 不使用临时变量来交换变量的值 2. 对象解构,让数据访问更便捷 3. 浅克隆对象 4. 合并对象 5. 清理数组 6. 将 NodeList 转换为数组 7. 检查数组是否满足指定条件 8. 将文本复制到剪贴板 9. 删除数组重复项 10. 取两个数组的交集 11. 求数组元素的总和 12. 根据指定条件判断,是否给对象的属性赋值 13. 使用变量作为对象的键 14. 离线状态检查器 15. 离开页面弹出确认对话框 16. 对象数组,根据对象的某个key求对应值的总和 17. 将 url 问号后面的查询字符串转为对象 18. 将秒数转换为时间格式的字符串 19.
63 3
高级前端开发需要知道的 25 个 JavaScript 单行代码
|
5月前
|
JSON JavaScript 数据格式
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
447 3
|
5月前
|
JavaScript
vue 农历日期转公历日期(含插件 js-calendar-converter 使用教程)
vue 农历日期转公历日期(含插件 js-calendar-converter 使用教程)
246 0
|
5月前
|
开发框架 监控 JavaScript
企业级node.js开发框架 【egg.js】 实用教程
企业级node.js开发框架 【egg.js】 实用教程
72 0
|
5月前
命令行加载特效 【cli-spinner.js】 实用教程
命令行加载特效 【cli-spinner.js】 实用教程
53 0