详解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 相关文章推荐
浅谈checkbox的一些操作(实战经验)
Nov 20 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
Seajs的学习笔记
Mar 04 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
JavaScript实现电灯开关小案例
Mar 30 Javascript
详细分析vue响应式原理
Jun 22 Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 Javascript
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
重置版宣传动画
2020/04/09 魔兽争霸
php第一次无法获取cookie问题处理
2014/12/15 PHP
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
BootStrap扔进Django里的方法详解
2016/05/13 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
js的对象与函数详解
2019/01/21 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
在Python中调用ggplot的三种方法
2015/04/08 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
python的unittest测试类代码实例
2017/12/07 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
python实现趣味图片字符化
2019/04/30 Python
django之自定义软删除Model的方法
2019/08/14 Python
pycharm显示远程图片的实现
2019/11/04 Python
django迁移文件migrations的实现
2020/03/31 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
党校学习自我鉴定
2014/02/24 职场文书
努力学习演讲稿
2014/05/10 职场文书
医院节能减排方案
2014/06/13 职场文书
2014年项目经理工作总结
2014/11/24 职场文书
2016年学校“3.12”植树节活动总结
2016/03/16 职场文书
Python 语言实现六大查找算法
2021/06/30 Python