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 鼠标点击事件及其它捕获
Jun 04 Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
jQuery源码分析之Event事件分析
Jun 07 Javascript
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
JavaScript常用本地对象小结
Mar 28 Javascript
Google 地图类型详解及示例代码
Aug 06 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 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知识收集
2012/08/20 PHP
phpnow php探针环境检测代码
2014/11/04 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
js实时监听文本框状态的方法
2011/04/26 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
python多线程扫描端口示例
2014/01/16 Python
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
软件工程师岗位职责
2013/11/16 职场文书
给排水工程师岗位职责
2013/11/21 职场文书
成品仓管员工作职责
2013/12/29 职场文书
入党自我评价优缺点
2014/01/25 职场文书
应届毕业生个人求职信范文
2014/01/29 职场文书
2014年应急工作总结
2014/12/11 职场文书
2015感人爱情寄语
2015/02/26 职场文书
2015年村计划生育工作总结
2015/04/28 职场文书
学习党史心得体会2016
2016/01/23 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
CSS完成视差滚动效果
2021/04/27 HTML / CSS