详解ES6通过WeakMap解决内存泄漏问题


Posted in Javascript onMarch 09, 2018

一、Map

1.定义

Map对象保存键值对,类似于数据结构字典;与传统上的对象只能用字符串当键不同,Map对象可以使用任意值当键。

2.语法

new Map([iterable])

属性

size:返回键值对的数量。

操作方法

  1. set(key, value):设置(新增/更新)键key的值为value,返回Map对象。
  2. get(key):读取键key的值,没有则返回undefined。
  3. has(key):判断一个Map对象中是否存在某个键值对,返回true/false。
  4. delete(key):删除某个键值对,返回true/false。
  5. clear():清除Map对象中所有键值对。

遍历方法

  1. keys():返回键名的Iterator对象。
  2. values():返回键值的Iterator对象。
  3. entries():返回键值对的Iterator对象。
  4. forEach((value, key, map) => {}):遍历Map对象所有键值对。

3.示例

操作方法

let m = new Map([
  ['foo', 11],
  ['bar', 22]
]);
m.set('mazey', 322)
  .set('mazey', 413);
console.log(m); // {"foo" => 11, "bar" => 22, "mazey" => 413}
console.log(m.has('mazey')); // true
m.delete('mazey');
console.log(m.has('mazey')); // false
m.clear();
console.log(m); // {}

遍历方法

let m = new Map([
  ['foo', 11],
  ['bar', 22],
  ['mazey', 413]
]);
console.log(m); // {"foo" => 11, "bar" => 22, "mazey" => 413}
console.log(m.keys()); // MapIterator {"foo", "bar", "mazey"}
console.log(m.values()); // MapIterator {11, 22, 413}
console.log(m.entries()); // MapIterator {"foo" => 11, "bar" => 22, "mazey" => 413}
m.forEach((value, key, map) => {
  console.log("键:%s,值:%s", key, value);
});
// 键:foo,值:11
// 键:bar,值:22
// 键:mazey,值:413

二、WeakMap

1.定义

WeakMap对象保存键值对,与Map不同的是其键必须是对象,因为键是弱引用,在键对象消失后自动释放内存。

2.语法

new WeakMap([iterable])

方法

  1. set(key, value):设置(新增/更新)键key的值为value,返回WeakMap对象。
  2. get(key):读取键key的值,没有则返回undefined。
  3. has(key):判断一个WeakMap对象中是否存在某个键值对,返回true/false。
  4. delete(key):删除某个键值对,返回true/false。

注意

因为WeakMap的特殊的垃圾回收机制,所以没有clear()方法。

3.示例

let obj = {
  foo: 11
};
let wm = new WeakMap();
wm.set(obj, 413322);
console.log(wm); // {{…} => 413322}
console.log(wm.has(obj)); // true

三、通过WeakMap解决内存泄漏问题

当使用Dom对象绑定事件时,Dom对象消失后若没有及时释放内存(置null),便会一直存在内存中。

使用WeakMap保存Dom对象不会出现这样的问题,因为Dom对象消失后,JS的垃圾回收机制便会自动释放其所占用的内存。

<button type="button" id="btn">按钮</button>
<script>
let wm = new WeakMap();
let btn = document.querySelector('#btn');
wm.set(btn, {count: 0});
btn.addEventListener('click', () => {
  let v = wm.get(btn);
  v.count++;
  console.log(wm.get(btn).count);
});
// 1 2 3 4 5...
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 巧妙去除数组中的重复项
Jan 25 Javascript
js相册效果代码(点击创建即可)
Apr 16 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
js中遍历Map对象的简单实例
Aug 08 Javascript
jquery.zclip轻量级复制失效问题
Jan 08 Javascript
简单易懂的天气插件(代码分享)
Feb 04 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
浅谈React组件之性能优化
Mar 02 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
JavaScript实现微信号随机切换代码
Mar 09 #Javascript
AngularJS中重新加载当前路由页面的方法
Mar 09 #Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 #Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 #Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 #Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 #Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 #Javascript
You might like
php文件上传类完整实例
2016/05/14 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
2016/12/15 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
python 的列表遍历删除实现代码
2020/04/12 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
HTML利用九宫格原理进行网页布局
2020/03/13 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
巴西宠物商店:Cobasi
2019/04/19 全球购物
初中校园之声广播稿
2014/01/15 职场文书
年度考核自我鉴定
2014/02/02 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
和解协议书
2014/04/16 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
房展策划方案
2014/06/07 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
人事任命通知
2015/04/20 职场文书
奖励申请报告范文
2015/05/15 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
JavaScript流程控制(分支)
2021/12/06 Javascript
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android