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代码
Oct 09 Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
Jquery中Event对象属性小结
Feb 27 Javascript
详解AngularJs中$resource和restfu服务端数据交互
Sep 21 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
vuex 的简单使用
Mar 22 Javascript
Angular项目如何升级至Angular6步骤全纪录
Sep 03 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
node.js中的path.basename方法使用说明
2014/12/09 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
js css自定义分页效果
2017/02/24 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
Python实现异步IO的示例
2020/11/05 Python
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
几个MySql的面试题
2013/04/22 面试题
名人演讲稿范文
2013/12/28 职场文书
竞聘演讲稿范文
2014/01/12 职场文书
护士辞职信模板
2014/01/20 职场文书
养成教育经验材料
2014/05/26 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
销售辞职信范文
2015/03/02 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS