详解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 相关文章推荐
javascript读取xml
Nov 04 Javascript
Jquery异步请求数据实例代码
Dec 28 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
node.js中的dns.getServers方法使用说明
Dec 08 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 Javascript
基于ajax和jsonp的原生封装(实例)
Oct 16 Javascript
微信小程序websocket实现聊天功能
Mar 30 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 Javascript
JS+Canvas实现五子棋游戏
Aug 26 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
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
javascript抖动元素的小例子
2013/10/28 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
Python输入二维数组方法
2018/04/13 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
骆驼官方商城:CAMEL
2016/11/22 全球购物
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
企业党员公开承诺书
2014/03/26 职场文书
竞聘演讲稿
2014/04/24 职场文书
标准版离职证明书
2014/09/12 职场文书
保送生自荐信范文
2015/03/26 职场文书
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis
Nginx实现负载均衡的项目实践
2022/03/18 Servers