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 相关文章推荐
jquery.ajax的url中传递中文乱码问题的解决方法
Feb 07 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
Feb 25 Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
vue-cli构建项目使用 less的方法
Oct 04 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
Sep 21 Javascript
js实现文字头像的生成代码
Mar 07 Javascript
微信小程序实现点击页面出现文字
Sep 21 Javascript
JavaScript中arguments的使用方法详解
Dec 20 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 和 MySQL 基础教程(四)
2006/10/09 PHP
快速配置PHPMyAdmin方法
2008/06/05 PHP
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
深入解析php中的foreach函数
2013/08/31 PHP
PHP获取文件行数的方法
2015/06/10 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
jquery中动态效果小结
2010/12/16 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
基于Vue和Element-Ui搭建项目的方法
2019/09/06 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
关于Django外键赋值问题详解
2017/08/13 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
python和c语言哪个更适合初学者
2020/06/22 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
学校食堂食品安全责任书
2014/07/28 职场文书
委托证明模板
2014/09/16 职场文书
2014年部门工作总结
2014/11/12 职场文书
中学教师个人总结
2015/02/10 职场文书
优秀英文求职信范文
2015/03/19 职场文书
OpenCV实现反阈值二值化
2021/11/17 Java/Android