ES6新数据结构Set与WeakSet用法分析


Posted in Javascript onMarch 31, 2017

本文实例讲述了ES6新数据结构Set与WeakSet用法。分享给大家供大家参考,具体如下:

新数据结构Set与WeakSet

1. Set

Set类似于数据,但是成员值都是唯一的。生成Set的方式如下。

var s = new Set();
[1,1,3,3,5,5].map( x => s.add(x) );
console.log(s); //Set {1, 3, 5}

没有重复值哟,如果面试官再让你编写数组去重的函数是不是简单多了。或者你可以这样写。

var set = new Set( [2,2,4,4,6,6] ); //Set {2, 4, 6}
console.log(set);

其实,Set作为构造函数使用时,接受的参数不仅可以是数组,任何类数组的对象也可以。Set的成员可以是对象,只是每个对象唯一。

那么,我们如何操纵Set呢。

s.add(val); //为s添加val,返回s
s.delete(val); //删除val,返回表示成功与否的布尔值
s.has(val); //返回表示s是否拥有成员val的布尔值
s.clear(); //清除所有成员

map与filter方法可以作用于数组,也可以用于Set(见第一个代码块)。

那么,我们如何遍历Set呢。

依然是 keys() , values() , entries() , forEach() . 举例如下(默认情况下Set的键与值相同):

var s = new Set();
var ul = document.getElementsByTagName('ul');
[1,1,3,3,5,5].map( x => s.add(x) );
for ( let key of s.keys() ){
  console.log(key); //1 , 3, 5
}
for ( let val of s.values() ){
  console.log(val); //1, 3,5
}
for ( let item of s.entries() ){
  console.log(item[0],item[1]); // 1 1 , 3 3, 5 5
}
for ( let [key,val] of s.entries() ){
  console.log(key,val); // 1 1 , 3 3, 5 5
}
s.forEach( function( val , key , ul ){
  console.log( this ); //ul
  console.log( val , key);
} , ul );

可以使用...扩展操作符把Set转换成数组。

2.WeakSet

WeakSet与Set类似,也是不重复的集合。区别在于:WeakSet的成员只能是对象;WeakSet中的对象是弱引用,即垃圾回收机制不考虑WeakSet对该对象的引用。当其他变量不再引用某对象,其将被垃圾回收机制回收,哪怕这个对象被WeakSet引用。这意味着,WeakSet的成员是无法被引用的,无法遍历WeakSet。WeakSet只有add、delete和has三个方法。注意:WeakSet没有size属性,也没有forEach方法。

对于WeakSet不能被遍历,可以这样解释。因为其成员都是弱引用,随时可能消失,遍历机制无法保证其成员一直存在。

那你可能问,WeakSet用来做什么,答,储存DOM节点,这样移除DOM时就可以不用担心内存泄漏了。

希望本文所述对大家ECMAScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery 图像裁剪插件Jcrop的简单使用
May 22 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 Javascript
Node.js操作redis实现添加查询功能
May 25 Javascript
Node.js学习之查询字符串解析querystring详解
Sep 28 Javascript
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
使用JavaScript破解web
Sep 28 Javascript
Vuex的初探与实战小结
Nov 26 Javascript
js Proxy的原理详解
May 25 Javascript
ES6新数据结构Map功能与用法示例
Mar 31 #Javascript
基于AGS JS开发自定义贴图图层
Mar 31 #Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 #Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 #Javascript
JS解决移动web开发手机输入框弹出的问题
Mar 31 #Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 #Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 #Javascript
You might like
php实现网页缓存的工具类分享
2015/07/14 PHP
php异常处理捕获错误整理
2019/09/23 PHP
JS模块与命名空间的介绍
2013/03/22 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
深入剖析JavaScript:Object类型
2016/05/10 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
基于nodejs 的多页面爬虫实例代码
2017/05/31 NodeJs
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
简单理解Vue中的nextTick方法
2018/01/30 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
Python中的函数作用域
2018/05/07 Python
使用Python进行目录的对比方法
2018/11/01 Python
Python 判断奇数偶数的方法
2018/12/20 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
django修改models重建数据库的操作
2020/03/31 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
英国标准协会商店:BSI Shop
2019/02/25 全球购物
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
来自南加州灵感的工作和娱乐服装:TravisMathew
2019/05/01 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
思想政治自我鉴定
2013/10/06 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python