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 相关文章推荐
Prototype使用指南之dom.js
Jan 10 Javascript
犀利的js 函数集合
Jun 11 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
Dec 07 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
vue-rx的初步使用教程
Sep 21 Javascript
微信小程序组件传值图示过程详解
Jul 31 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 Javascript
JS删除数组指定值常用方法详解
Jun 04 Javascript
JavaScript动态生成表格的示例
Nov 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中json_decode()和json_encode()的使用方法
2012/06/04 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
动态添加js事件实现代码
2009/03/12 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
采用call方式实现js继承
2014/05/20 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
js实现图片无缝循环轮播
2019/10/28 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
python操作MySQL数据库的方法分享
2012/05/29 Python
python根据经纬度计算距离示例
2014/02/16 Python
Python编写百度贴吧的简单爬虫
2015/04/02 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
公司培训心得体会
2014/01/03 职场文书
初中校园广播稿
2014/02/02 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
本科毕业答辩开场白
2015/05/27 职场文书
爱国主义影片观后感
2015/06/18 职场文书
升学宴家长答谢词
2015/09/29 职场文书
解析mybatis-plus中的resultMap简单使用
2021/11/23 Java/Android
frg-100简单操作(设置)说明
2022/04/05 无线电
Java数组详细介绍及相关工具类
2022/04/14 Java/Android
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers