ES6中如何使用Set和WeakSet


Posted in Javascript onMarch 10, 2016

ES6中提供了两新数据结构-Set和WeakSet。Set是类似于数组,但是成员变量的值都是唯一的,没有重复的值。WeakSet也是不重复的值的集合,但是只能用来存放对象。

一、Set使用

(1)Set本身提供了一个构造函数,用来生成Set数据结构。

var s = new Set();
[2,2,2,5,8,16,2,1].map(x => s.add(x))

for(i of s){console.log(i)}
//2,5,8,16,1

(2)Set()函数可以接受一个数组,作为构造参数,用于做初始化。

var s = new Set([1,2,3,4,2,4,3]);
[...s]
//[1,2,3,4]

注意:向Set中加入值的时候不会发生类型转换,所以5和”5”是两个不同的值,Set内部判断两个值是否相等,使用的是 ===,这就意味着这两个对象总是不相等。唯一列外的是NaN本身(精确相等运算符认为NaN不等于自身)

let set = new Set();
set.add({})
set.size//1
set.add({})
set.size//2

则,上面的代码表示,由于这两个空对象不是精确相等,所以是两个不同的值。

(3)Set的方法和属性

(3.1)Set的属性

Set.prototype.size:返回Set实例的成员数量。
Set.prototype.constructor:默认的构造Set函数。

(3.2)Set的操作啊函数

add(value):添加某个值,返回Set结构本身。
delete(value):删除某个值,返回一个布尔值,表示删除成功。
has(value):返回一个布尔值,表示参数是否为Set的成员。
clear():清除所有成员,没有返回值。

var set = new Set();
set.add(1).add(2).add(22).add(22);
set.size//3

set.hae(22)//true
set.has(4)//false
set.delete(2)//true

(3.3)Set遍历操作

Set有四个遍历方法。可以用于遍历成员。
keys() :返回一个键名的遍历器
values() :返回一个值的遍历器
entries() :返回一个键值对的遍历器
forEach():使用回调函数遍历每个成员

注意:由于Set没有键名,只有值名,keys()和values()返回的结果是一样,

let set = new Set(['red','green','blue']);
for(let item of set.keys()){
console.log(item);
}
//red,green,blue
for(let item of set.values()){
console.log(item);
}
//red,green,blue
for(let item of set.entries()){
console.log(item);
}
//["red","red"]
//["green","green"]
//["blue","blue"]

//所以,entries方法返回的遍历器同时包括键名和值,所以每次输出的是一个数组。其实成员都是完全一样的。

注意:Set默认的可遍历,其默认遍历器生成函数就是它的values方法。
这就意味着,可以省略values方法,直接用for…of遍历。

var set = new Set([1,2,3,4]);
for(let x of set){
console.log(x);
}
//1
//2
//3
//4

如果使用扩展运算符(…)内部使用for…of 循环,所以也可以用于Set结构。

let set = new Set(['red','green','blue']);
let arr = [...set];
//['red','green','blue'];

(3.4)Set实现并集,交集,差集

let set1 = new Set([1,2,3,4,5,6]);
let set2 = new Set([4,5,6,7,8,9]);

//并集
let union = new Set([...set1,...set2]);
//[1,2,3,4,5,6,7,8,9]
//交集
let intersect = new Set([...set1].filter(x => b.has(s)));
//[4,5,6]
//差集
let intersect = new Set([...set1].filter(x => !b.has(s)));
//[1,2,3,4]

(3.5)Set实现forEach的使用

let set = new Set([1,2,3,4,5,6]);
set.forEach(value,key)=>consloe.log(vlaue+1);
//2
//3
//4
//5
//6
//7

注意:forEach方法的参数就是一个处理函数,该函数依次为(键值,键名)集合本身。另外,forEach方法还有第二个参数,表示绑定this的对象。

二、WeakSet使用

WeakSet类似于Set,也是不重复的值的集合。但是它只能用于存储对象。而不能是其他类型的值。
WeakSet是一个个构造函数。可以接受数组和类似数组的对象作为参数。(实际上,任何具作为iterable接口的对象都可以作为WeakSet的参数)。该数组的所有成员都会自动成为WeakSet的实例对象的成员。
var a = new [[1,2],[3,4]];
var ws = new WeakSet(a);

var ws = new WeakSet();
ws.add(1);//TypeError:Invalid value used in weak set 
ws.add(Symbol);//TypeError:Invalid value used in weak set

添如一个数值和一个Symbol,结果同时报错。

WeakSet结构有以下的上方法
WeakSet.protoptype.add(value):向WeakSet实例添加一个新成员。
WeakSet.protoptype.delete(value):删除WeakSet实例指定成员。
WeakSet.protoptype.has(value):返回一个布尔值,表示某个值是否在WeakSet实例中。

var ws = new WeakSet();
var obj = {};
var foo = {};
ws.add(window);
ws.add(obj);
ws.has(window);//true
ws.has(foo);false
ws.delete(window);//true
ws.has(window);//false

WeakSet 不能遍历,是因为成员都是弱引用,随时可能消失,遍历不能保证成员的存在。可能刚刚遍历结束,成员就取不到了。WeakSet的一个用处是存储DOM节点,而不用担心这些节点从文档移除时,会引起内存的泄露。

Javascript 相关文章推荐
JavaScript的parseInt 进制问题
May 07 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
JS中怎样判断undefined(比较不错的方法)
Mar 27 Javascript
js实现简单的验证码
Dec 25 Javascript
AngularJS实现ajax请求的方法
Nov 22 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
knockoutjs模板实现树形结构列表
Jul 31 Javascript
Vue下的国际化处理方法
Dec 18 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
Aug 19 Javascript
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
解析javascript瀑布流原理实现图片滚动加载
Mar 10 #Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 #Javascript
基于javascript制作微信聊天面板
Aug 09 #Javascript
关于Bootstrap弹出框无法调用问题的解决办法
Mar 10 #Javascript
TypeScript Type Innference(类型判断)
Mar 10 #Javascript
JavaScript File分段上传
Mar 10 #Javascript
ES6中非常实用的新特性介绍
Mar 10 #Javascript
You might like
一个简单的域名注册情况查询程序
2006/10/09 PHP
PHP多线程抓取网页实现代码
2010/07/22 PHP
php操作SVN版本服务器类代码
2011/11/27 PHP
解析PHP跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
表单切换,用回车键替换Tab健(不支持IE)
2011/07/20 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
js中数组(Array)的排序(sort)注意事项说明
2014/01/24 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
五步轻松实现zTree的使用
2017/11/01 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
Python线程之定位与销毁的实现
2019/02/17 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
使用K.function()调试keras操作
2020/06/17 Python
成人毕业生自我鉴定
2013/10/18 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
初中军训感言
2015/08/01 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书