JavaScript WeakMap使用详解


Posted in Javascript onFebruary 05, 2021

WeakMap 对象是一组键/值对的集合,其中的键是弱引用的。其键必须是对象,而值可以是任意的。

语法

new WeakMap([iterable])

参数

iterable
Iterable 是一个数组(二元数组)或者其他可迭代的且其元素是键值对的对象。每个键值对会被加到新的 WeakMap 里。null 会被当做 undefined。

描述

WeakMap 的 key 只能是 Object 类型。 原始数据类型 是不能作为 key 的(比如 Symbol)。

Why WeakMap?

在 JavaScript 里,map API 可以通过使其四个 API 方法共用两个数组(一个存放键,一个存放值)来实现。给这种 map 设置值时会同时将键和值添加到这两个数组的末尾。从而使得键和值的索引在两个数组中相对应。当从该 map 取值的时候,需要遍历所有的键,然后使用索引从存储值的数组中检索出相应的值。

但这样的实现会有两个很大的缺点,首先赋值和搜索操作都是 O(n) 的时间复杂度( n 是键值对的个数),因为这两个操作都需要遍历全部整个数组来进行匹配。另外一个缺点是可能会导致内存泄漏,因为数组会一直引用着每个键和值。这种引用使得垃圾回收算法不能回收处理他们,即使没有其他任何引用存在了。

相比之下,原生的 WeakMap 持有的是每个键对象的“弱引用”,这意味着在没有其他引用存在时垃圾回收能正确进行。原生 WeakMap 的结构是特殊且有效的,其用于映射的 key 只有在其没有被回收时才是有效的。

正由于这样的弱引用,WeakMap 的 key 是不可枚举的 (没有方法能给出所有的 key)。如果key 是可枚举的话,其列表将会受垃圾回收机制的影响,从而得到不确定的结果。因此,如果你想要这种类型对象的 key 值的列表,你应该使用 Map。

基本上,如果你要往对象上添加数据,又不想干扰垃圾回收机制,就可以使用 WeakMap。

属性

  • WeakMap.length

length  属性的值为 0。

  • WeakMap.prototype

WeakMap 构造器的原型。 允许添加属性到所有的 WeakMap 对象。

WeakMap 实例

所有 WeakMap 实例继承自 WeakMap.prototype.

属性

WeakMap.prototype.constructor
返回创建WeakMap实例的原型函数。 WeakMap函数是默认的。

方法

  • WeakMap.prototype.delete(key)

移除key的关联对象。执行后 WeakMap.prototype.has(key)返回false。

  • WeakMap.prototype.get(key)

返回key关联对象, 或者 undefined(没有key关联对象时)。

  • WeakMap.prototype.has(key)

根据是否有key关联对象返回一个Boolean值。

  • WeakMap.prototype.set(key, value)

在WeakMap中设置一组key关联对象,返回这个 WeakMap对象。

示例

使用 WeakMap

const wm1 = new WeakMap(),
   wm2 = new WeakMap(),
   wm3 = new WeakMap();
const o1 = {},
   o2 = function(){},
   o3 = window;

wm1.set(o1, 37);
wm1.set(o2, "azerty");
wm2.set(o1, o2); // value可以是任意值,包括一个对象或一个函数
wm2.set(o3, undefined);
wm2.set(wm1, wm2); // 键和值可以是任意对象,甚至另外一个WeakMap对象

wm1.get(o2); // "azerty"
wm2.get(o2); // undefined,wm2中没有o2这个键
wm2.get(o3); // undefined,值就是undefined

wm1.has(o2); // true
wm2.has(o2); // false
wm2.has(o3); // true (即使值是undefined)

wm3.set(o1, 37);
wm3.get(o1); // 37

wm1.has(o1);  // true
wm1.delete(o1);
wm1.has(o1);  // false

实现一 个带有 .clear() 方法的类 WeakMap 类

class ClearableWeakMap {
 constructor(init) {
  this._wm = new WeakMap(init)
 }
 clear() {
  this._wm = new WeakMap()
 }
 delete(k) {
  return this._wm.delete(k)
 }
 get(k) {
  return this._wm.get(k)
 }
 has(k) {
  return this._wm.has(k)
 }
 set(k, v) {
  this._wm.set(k, v)
  return this
 }
}

规范

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262) WeakMap Standard Initial definition.
ECMAScript (ECMA-262) WeakMap Living Standard

以上就是JavaScript WeakMap使用详解的详细内容,更多关于JavaScript WeakMap的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
javascript的函数、创建对象、封装、属性和方法、继承
Mar 10 Javascript
THREE.JS入门教程(2)着色器-上
Jan 24 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
详解AngularJs中$resource和restfu服务端数据交互
Sep 21 Javascript
JS针对Array的各种操作汇总
Nov 29 Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 Javascript
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
JavaScript 声明私有变量的两种方式
Feb 05 #Javascript
node.js文件的复制、创建文件夹等相关操作
Feb 05 #Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 #Javascript
JavaScript代码实现微博批量取消关注功能
Feb 05 #Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 #Javascript
关于element的表单组件整理笔记
Feb 05 #Javascript
详解JavaScript中的this指向问题
Feb 05 #Javascript
You might like
php生成略缩图代码
2012/07/16 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
js实现返回顶部效果
2017/03/10 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
React 高阶组件入门介绍
2018/01/11 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
JS常见构造模式实例对比分析
2018/08/27 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
基于Vue的侧边目录组件的实现
2020/02/05 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
Python中常用的os操作汇总
2020/11/05 Python
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
怎样比较两个类型为String的字符串
2016/08/17 面试题
职业教育毕业生求职信
2013/11/09 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
成本会计岗位职责
2015/02/03 职场文书
辞职信怎么写
2015/02/27 职场文书
nginx静态资源的服务器配置方法
2022/07/07 Servers