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 相关文章推荐
javascript学习(一)构建自己的JS库
Jan 02 Javascript
浅谈javascript中的instanceof和typeof
Feb 27 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
一分钟理解js闭包
May 04 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
微信小程序与php 实现微信支付的简单实例
Jun 23 Javascript
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
微信小程序入门之广告条实现方法示例
Dec 05 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 Javascript
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
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中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
php版微信自动获取收货地址api用法示例
2016/09/22 PHP
php取出数组单个值的方法
2018/03/12 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
Prototype Number对象 学习
2009/07/19 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
python实现多层感知器
2019/01/18 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
Django继承自带user表并重写的例子
2019/11/18 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
python使用rsa非对称加密过程解析
2019/12/28 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
Django models文件模型变更错误解决
2020/05/11 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
几个Shell Script面试题
2012/08/31 面试题
实习求职信
2013/12/01 职场文书
小学生评语大全
2014/04/18 职场文书
庆元旦活动总结
2014/07/09 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
服务承诺书
2015/01/19 职场文书
拖欠货款起诉状
2015/05/20 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android