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 相关文章推荐
RGB颜色值转HTML十六进制(HEX)代码的JS函数
Apr 25 Javascript
JavaScript 替换Html标签实现代码
Oct 14 Javascript
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
详解jQuery中基本的动画方法
Dec 14 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
Vue头像处理方案小结
Jul 26 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 Javascript
React自定义hook的方法
Jun 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
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
ThinkPHP的I方法使用详解
2014/06/18 PHP
PHP实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
jQuery 动画弹出窗体支持多种展现方式
2010/04/29 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
Python中关键字is与==的区别简述
2014/07/31 Python
利用Python实现图书超期提醒
2016/08/02 Python
python爬虫 urllib模块url编码处理详解
2019/08/20 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
使用python绘制二维图形示例
2019/11/22 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
linux环境下安装python虚拟环境及注意事项
2020/01/07 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
信息服务专业毕业生求职信
2014/03/02 职场文书
2014年客户经理工作总结
2014/11/20 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
2015年党员岗位承诺书
2015/04/27 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL