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 相关文章推荐
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
Dom操作之兼容技巧分享
Sep 20 Javascript
浅谈关于JavaScript的语言特性分析
Apr 11 Javascript
jquery弹出关闭遮罩层实例
Aug 06 Javascript
javascript为下拉列表动态添加数据项
May 23 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
Vue中实现回车键切换焦点的方法
Feb 19 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
Syphon 使用方法
2021/03/03 冲泡冲煮
zf框架db类的分页示例分享
2014/03/14 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
用jquery写的一个万年历(自写)
2014/01/20 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
javascript显示系统当前时间代码
2016/12/29 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
微信小程序实现选项卡功能
2020/06/19 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
python友情链接检查方法
2015/07/08 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
酒店应聘自荐信
2013/11/09 职场文书
公司募捐倡议书
2014/05/14 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
小学国旗下的演讲稿
2014/08/28 职场文书
甲午风云观后感
2015/06/02 职场文书
房产证明范本
2015/06/19 职场文书
在Django中使用MQTT的方法
2021/05/10 Python
Python快速实现一键抠图功能的全过程
2021/06/29 Python