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 相关文章推荐
js 实现打印网页中定义的部分内容的代码
Apr 01 Javascript
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
javascript运行机制之this详细介绍
Feb 07 Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 Javascript
vue实现图片上传预览功能
Dec 23 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 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 file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
php获取网卡的MAC地址支持WIN/LINUX系统
2014/04/30 PHP
PHP中实现接收多个name相同但Value不相同表单数据实例
2015/02/03 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
纯JS实现五子棋游戏
2020/05/28 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
Python Tkinter简单布局实例教程
2014/09/03 Python
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
详解Python中的文本处理
2015/04/11 Python
Python里disconnect UDP套接字的方法
2015/04/23 Python
python单元测试unittest实例详解
2015/05/11 Python
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
利用Pytorch实现简单的线性回归算法
2020/01/15 Python
python yield和Generator函数用法详解
2020/02/10 Python
python3 实现口罩抽签的功能
2020/03/11 Python
python时间time模块处理大全
2020/10/25 Python
英国足球店:UK Soccer Shop
2017/11/19 全球购物
高分子材料与工程专业个人求职信
2013/12/15 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
创先争优公开承诺书
2014/08/30 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
2014年行政工作总结
2014/11/19 职场文书
世界遗产导游词
2015/02/13 职场文书