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 相关文章推荐
IE 下的只读 innerHTML
Aug 21 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
网页广告中JS代码的信息监听示例
Apr 02 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
基于对象合并功能的实现示例
Oct 10 Javascript
js实现上传并压缩图片效果
Jan 10 Javascript
详解jQuery中的easyui
Sep 02 jQuery
基于JavaScript实现十五拼图代码实例
Apr 26 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无法访问远程mysql的问题分析及解决
2013/05/16 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
JS的replace方法介绍
2012/10/20 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
使用python 3实现发送邮件功能
2018/06/15 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
工程招投标邀请书
2014/01/26 职场文书
产品质量承诺书范文
2014/03/27 职场文书
小组口号大全
2014/06/09 职场文书
幼师求职信
2014/06/23 职场文书
班级团队活动方案
2014/08/14 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers