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 动态设置已知select的option的value值的代码
Dec 16 Javascript
javascript+css 网页每次加载不同样式的实现方法
Dec 27 Javascript
真正的JQuery.ajax传递中文参数的解决方法
May 28 Javascript
从阶乘函数对比Javascript和C#的异同
May 31 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
javascript数组详解
Oct 22 Javascript
js只执行1次的函数示例
Jul 20 Javascript
DOM 事件的深入浅出(一)
Dec 05 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
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
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
理解php依赖注入和控制反转
2016/05/11 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
用正则xmlHttp实现的偷(转)
2007/01/22 Javascript
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
nodejs文件操作模块FS(File System)常用函数简明总结
2014/06/05 NodeJs
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
谈谈JavaScript异步函数发展历程
2015/09/29 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
javascript时间差插件分享
2016/07/18 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
从0搭建vue-cli4脚手架
2020/06/17 Javascript
从零学Python之hello world
2014/05/21 Python
Python中的连接符(+、+=)示例详解
2017/01/13 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
Python3.8中使用f-strings调试
2019/05/22 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
基于Pytorch SSD模型分析
2020/02/18 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
Python读取yaml文件的详细教程
2020/07/21 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
canvas像素画板的实现代码
2018/11/21 HTML / CSS
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
上海奥佳笔试题面试题
2016/11/16 面试题
教师听课评语大全
2014/12/31 职场文书