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 相关文章推荐
解决FLASH需要点击激活的代码
Dec 20 Javascript
给网站上的广告“加速”显示的方法
Apr 08 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 Javascript
js展开闭合效果演示代码
Jul 24 Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
JavaScript数据结构之二叉树的删除算法示例
Apr 13 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 Javascript
vue组件vue-esign实现电子签名
Apr 21 Vue.js
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错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
改变隐藏的input中value的值代码
2013/12/30 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
node.js中watch机制详解
2014/11/17 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
prototype框架中美元符号$用法分析
2016/01/22 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
详解数组Array.sort()排序的方法
2020/05/09 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
微信小程序监听用户登录事件的实现方法
2019/11/11 Javascript
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
全球在线商店:BerryLook
2019/04/14 全球购物
node中使用shell脚本的方法步骤
2021/03/23 Javascript
《东方明珠》教学反思
2014/04/20 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
倡议书的格式写法
2015/04/28 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书
Python django中如何使用restful框架
2021/06/23 Python
Python数组变形的几种实现方法
2022/05/30 Python
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python