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 相关文章推荐
JavaScript-世界上误解最深的语言分析
Aug 12 Javascript
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 Javascript
JavaScript判断数组是否存在key的简单实例
Aug 03 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
Vue.js组件通信的几种姿势
Oct 23 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 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
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
js的一些常用方法小结
2011/06/29 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
js如何找出字符串中的最长回文串
2018/06/04 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
express启用https使用小记
2019/05/21 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
Python使用while循环花式打印乘法表
2019/01/28 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
基于python中__add__函数的用法
2019/11/25 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
Python多线程thread及模块使用实例
2020/04/28 Python
Python 防止死锁的方法
2020/07/29 Python
python判断变量是否为列表的方法
2020/09/17 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
餐饮营销方案
2014/02/23 职场文书
高一学生评语大全
2014/04/25 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
居委会工作总结2015
2015/05/18 职场文书
python使用pymysql模块操作MySQL
2021/06/16 Python
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技