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动画效果代码
Jul 20 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
Apr 12 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
Oct 01 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
了解重排与重绘
May 29 Javascript
详解Vue中的基本语法和常用指令
Jul 23 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 Javascript
node crawler如何添加promise支持
Feb 01 Javascript
js实现数字跳动到指定数字
Aug 25 Javascript
vue项目两种方式实现竖向表格的思路分析
Apr 28 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
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
VBScript版代码高亮
2006/06/26 Javascript
JavaScript浏览器选项卡效果
2010/08/25 Javascript
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
jquery 使用简明教程
2014/03/05 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
2015/12/06 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
pygame实现弹力球及其变速效果
2017/07/03 Python
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
django中静态文件配置static的方法
2018/05/20 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
有针对性的求职自荐信
2013/11/14 职场文书
会计师职业生涯规划范文
2014/02/18 职场文书
小学班主任寄语大全
2014/04/04 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
学校中秋节活动总结
2015/03/23 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL