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获取单选按钮的数据
Nov 27 Javascript
javascript代码加载优化方法
Jan 30 Javascript
javascrip关于继承的小例子
May 10 Javascript
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 Javascript
深入浅析Node环境和浏览器的区别
Aug 14 Javascript
手挽手带你学React之React-router4.x的使用
Feb 14 Javascript
js事件触发操作实例分析
Jun 21 Javascript
javascript实现拖拽碰撞检测
Mar 12 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 05 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
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
讲解Python中的递归函数
2015/04/27 Python
python任务调度实例分析
2015/05/19 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
Scrapy框架使用的基本知识
2018/10/21 Python
Django框架登录加上验证码校验实现验证功能示例
2019/05/23 Python
解决python replace函数替换无效问题
2020/01/18 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
环保倡议书
2014/04/14 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
2014年体育工作总结
2014/11/24 职场文书
专项资金申请报告
2015/05/15 职场文书
小学生读书笔记范文
2015/06/30 职场文书