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 日期计算算法
Sep 11 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
jQuery利用sort对DOM元素进行排序操作
Nov 07 Javascript
JS实现页面打印功能
Mar 16 Javascript
js省市区级联查询(插件版&无插件版)
Mar 21 Javascript
原生js实现简单的焦点图效果实例
Dec 14 Javascript
讲解vue-router之命名路由和命名视图
May 28 Javascript
json字符串传到前台input的方法
Aug 06 Javascript
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
js如何实现元素曝光上报
Aug 07 Javascript
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实现的简单压缩英文字符串的代码
2008/04/24 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
php精度计算的问题解析
2019/06/21 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
JavaScript 无符号右移运算符
2009/04/17 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
Python break语句详解
2014/03/11 Python
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
python实现邮件发送功能
2019/08/10 Python
python机器学习实现决策树
2019/11/11 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
夜大毕业生自我鉴定
2013/10/31 职场文书
经理任命书模板
2014/06/06 职场文书
股指期货心得体会
2014/09/10 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS