ECMAScript6中Set/WeakSet详解


Posted in Javascript onJune 12, 2015

ES6里加入了一个新数据解构Set,和Java的Set一样,它里面不存放重复的元素。Set实现为一个类,使用时需要先new。

var s1 = new Set()
s1.add(1)
s1.add(2)
s1.add(3)
s1.add(1)
 
var s2 = new Set()
s2.add('a')
s2.add('a')
 
// 输出1,2, 3
for (var i of s1 ) {
  console.log(i)
}
// 输出a
for (var i of s2 ) {
  console.log(i)
}

上面用Set的add方法添加元素,重复添加的,不会存进去。

Set构造器还可以接受数组作为参数传入

var s3 = new Set([1,2,3,1])
s3.size // 3

可以看到重复的数字1依然没有放进去,另外取Set的长度使用size,不是length。

需要注意的是对于{}或[],它们是两个同的对象

var s4 = new Set()
s4.add({})
s4.add({})
s4.size // 2

一、遍历Set (for of)

var s1 = new Set()
s1.add(1)
s1.add(2)
s1.add(3)
 
// 输出1,2, 3
for (var i of s1) {
  console.log(i)
}

二、把Set转成数组

var s1 = new Set()
s1.add(1)
s1.add(2)
 
// toArray
var a1 = Array.from(s1)
Array.isArray(a1) // true
 
// or
var a1 = [...new Set(s1)] 

三、利用Set给数组去重

function distinct(arr) {
  return Array.from(new Set(arr))
// return [...new Set(arr)]
}

ECMAScript6中Set/WeakSet详解

Set的属性

constructor
size
Set的方法

has(val) 判断是否存在该元素
add(val) 添加元素
delete(val) 删除元素
clear 删除所有元素
keys
values
entries
forEach 遍历元素
map
filter

四、WeakSet

WeakSet和Set一样都不存储重复的元素,但有一些不同点

1. 只存储对象类型元素

ws = new WeakSet()
ws.add(1)

FF下报错如下

ECMAScript6中Set/WeakSet详解

2. 只有add/delete/clear/has三个方法,不能遍历,没有size属性等

ws = new WeakSet()
ws.size // undefined
ws.forEach // undefined

MDN的解释

WeakSet 对象中存储的对象值都是被弱引用的, 如果没有其他的变量或属性引用这个对象值, 则这个对象值会被当成垃圾回收掉. 正因为这样, WeakSet 对象是无法被枚举的, 没有办法拿到它包含的所有元素

WeakSet主要用来储存DOM节点,当这些节点从文档移除时,不会引发内存泄漏。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
通过length属性判断jquery对象是否存在
Oct 18 Javascript
javascript数组去重方法终极总结
Jun 05 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
js读取并解析JSON类型数据的方法
Nov 14 Javascript
判断是否存在子节点的实现代码
May 18 Javascript
PHP+jquery+ajax实现分页
Dec 09 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
vue-hook-form使用详解
Apr 07 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
深入理解Vue 单向数据流的原理
Nov 09 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 #Javascript
ECMAScript6块级作用域及新变量声明(let)
Jun 12 #Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 #Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 #Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 #Javascript
ECMAScript6函数默认参数
Jun 12 #Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 #Javascript
You might like
PHP curl 获取响应的状态码的方法
2014/01/13 PHP
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
Smarty保留变量用法分析
2016/05/23 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
在Python中使用HTML模版的教程
2015/04/29 Python
Python中统计函数运行耗时的方法
2015/05/05 Python
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
Python计算不规则图形面积算法实现解析
2019/11/22 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
电气自动化自荐信
2013/10/10 职场文书
九年级体育教学反思
2014/01/23 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
从事会计工作年限证明
2015/06/23 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书
银行培训心得体会范文
2016/01/09 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书