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 相关文章推荐
Prototype 学习 工具函数学习($方法)
Jul 12 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
Oct 29 Javascript
使用C++为node.js写扩展模块
Apr 22 Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
Angular实现表单验证功能
Nov 13 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
Vue分页插件的前后端配置与使用
Oct 09 Javascript
解析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
JSON在PHP中的应用介绍
2012/09/08 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
使用canvas进行图像编辑的实例
2017/08/29 Javascript
js html实现计算器功能
2018/11/13 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
python中的decorator的作用详解
2018/07/26 Python
使用python将多个excel文件合并到同一个文件的方法
2019/07/09 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
巴西购物网站:Onofre Agora
2020/06/08 全球购物
J2EE中的容器都包括哪些
2013/08/21 面试题
技校生自我鉴定
2013/12/08 职场文书
周年庆典邀请函范文
2014/01/24 职场文书
难忘的一课教学反思
2014/04/30 职场文书
村党支部书记承诺书
2014/05/29 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
多表查询、事务、DCL
2021/04/05 MySQL
python用海龟绘图写贪吃蛇游戏
2021/06/18 Python
ORACLE查看当前账号的相关信息
2021/06/18 Oracle
php双向队列实例讲解
2021/11/17 PHP
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL