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 相关文章推荐
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
js监听键盘事件示例代码
Jul 26 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
Sep 05 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
基于js与flash实现的网站flv视频播放插件代码
Oct 14 Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 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伪静态之APACHE篇
2014/06/02 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
php实现的xml操作类
2016/01/15 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
js实现select跳转功能代码
2014/10/22 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
python中plot实现即时数据动态显示方法
2018/06/22 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
深入了解Django中间件及其方法
2019/07/26 Python
pandas中read_csv的缺失值处理方式
2019/12/19 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
Linux操作面试题
2012/05/16 面试题
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
开展读书活动总结
2014/06/30 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
python源码剖析之PyObject详解
2021/05/18 Python
Python中的 No Module named ***问题及解决
2022/07/23 Python