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 相关文章推荐
Javascript 日期对象Date扩展方法
May 30 Javascript
用 Javascript 验证表单(form)中的单选(radio)值
Sep 08 Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
js实现人才网站职位选择功能的方法
Aug 14 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
基于JavaScript canvas绘制贝塞尔曲线
Dec 25 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 Javascript
JS计算斐波拉切代码实例
Sep 12 Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 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
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
小程序转发探索示例
2019/02/19 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
python实现神经网络感知器算法
2017/12/20 Python
Python机器学习之决策树算法
2017/12/22 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
python 同时读取多个文件的例子
2019/07/16 Python
python如何将两个txt文件内容合并
2019/10/18 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
学年自我鉴定范文
2013/10/01 职场文书
校园达人秀策划书
2014/01/12 职场文书
法律七进实施方案
2014/03/15 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
商场收银员岗位职责
2015/04/07 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
喋血孤城观后感
2015/06/08 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android