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 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
简述AngularJS相关的一些编程思想
Jun 23 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
Jul 27 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
Apr 22 Javascript
原生js轮播特效
May 18 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 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 在文件指定行插入数据的代码
2010/05/08 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
jQuery深拷贝Json对象简单示例
2016/07/06 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
python购物车程序简单代码
2018/04/18 Python
实例讲解Python爬取网页数据
2018/07/08 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
ML神器:sklearn的快速使用及入门
2019/07/11 Python
Python3远程监控程序的实现方法
2019/07/15 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
python基于exchange函数发送邮件过程详解
2020/11/06 Python
python如何实现递归转非递归
2021/02/25 Python
华为慧通面试题
2012/09/11 面试题
《猴子种树》教学反思
2014/02/14 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
新员工考核评语
2014/12/31 职场文书
综合测评个人总结
2015/03/03 职场文书
2016大学军训心得体会
2016/01/11 职场文书