ES6 中的 Set
收录待用,修改转载已取得腾讯云授权
作者:kurtshen
ES6 新增了几种集合类型,本文主要介绍Set以及其使用。
其基本描述为
Set对象是值的集合,你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次,即 Set 中的元素是唯一的。
它的声明
new Set([iterable]);
其中iterable是一个可迭代对象,其中的所有元素都会被加入到 Set 中。null被视作 undefined。也可以不传入[iterable],通过其add方法来添加元素。
对于ruby或者是python比较熟悉的同学可能会比较了解set这个东东。它是ES6 新增的有序列表集合,它不会包含重复项。
Set的属性
- Set.prototype.size:返回Set实例的成员数量。
- Set.prototype.constructor:默认的构造Set函数。
Set方法
- add(value):添加某个值,返回Set结构本身。
- delete(value):删除某个值,返回一个布尔值,表示删除成功。
- has(value):返回一个布尔值,表示参数是否为Set的成员。
- clear():清除所有成员,没有返回值。
- keys() :返回一个键名的遍历器
- values() :返回一个值的遍历器
- entries() :返回一个键值对的遍历器
- forEach():使用回调函数遍历每个成员
例子
先借用之前看过的一篇英文blog的例子。地址请戳Removing Elements from JavaScript Arrays
总所周知,数组是没有remove这个方法的。当我们需要从一个数组里面移除一个特定的元素时,我们通常会怎么写?
在es6之前,我们会这么写
function remove(array, element) {
const index = array.indexOf(element);
array.splice(index, 1);
}
然后我们可以这么用
const arr = ["a", "e", "i", "o", "u", "x"];
arr; //["a", "e", "i", "o", "u", "x"]
// 移除其中的“x”
remove(arr, "x");
arr; // ["a", "e", "i", "o", "u"]
// 细心的同学会发现我们前面那么写的问题,如果我们再次移除“x”的话,会发生移除最后一个元素
remove(arr, "x");
arr; // ["a", "e", "i", "o"]
当数组查找不到某元素时会返回-1,则数组的splice会从末尾往前,移除了最后一个元素,于是我们会这么写
function remove(array, element) {
const index = array.indexOf(element);
if (index !== -1) {
array.splice(index, 1);
}
}
这样的话我们就每次总是需要去检测index的值。
我们还可以用filter来写remove,这样则返回一个新的数组
function remove(array, element) {
return array.filter(e => e !== element);
}
那么有了Set我们能怎写?其实也不需要写,因为set其初始化可以接受一个数组,作为构造参数,另外自带了一个delete的方法
const set = new Set(["a", "e", "i", "o", "u", "x"]);
set.delete("x"); // true
set; // Set {"a", "e", "i", "o", "u"}
set.delete("x"); // false
set; // Set {"a", "e", "i", "o", "u"}
好像蛮好的,但其实Set集合中的值是不能重复的,如果所需要的数据结构是要允许有重复项的,那么Set也没有什么用。
Set中值的相等是这么说的
因为 Set 中的值总是唯一的,所以需要判断两个值是否相等。判断相等的算法与严格相等(=操作符)不同。具体来说,对于 Set , +0 (+0 严格相等于-0)和-0是不同的值。尽管在最新的 ECMAScript 6规范中这点已被更改。从Gecko 29.0和 recent nightly Chrome开始,Set 视 +0 和 -0 为相同的值。另外,NaN和undefined都可以被存储在Set 中, NaN之间被视为相同的值(尽管 NaN ! NaN)。
另一个例子
既然它的值是唯一的,那么我们是不是可以用它来实现数组去重?
原先我们去重可能会这么写
let arr = [1,'1', 2, 3, 2, 4, 5, 4, 1];
let arr_unique = arr.filter(function(item, index, array) {
return array.indexOf(item, index + 1) === -1;
});
arr_unique;//["1", 3, 2, 5, 4, 1]
或者利用对象key的唯一性,这么写
let arr = [1,'1', 2, 3, 2, 4, 5, 4, 1];
let tmpObj = {};
let arr_unique = [];
arr.forEach(function(a) {
let key = (typeof a) + a;
if (!tmpObj[key]) {
tmpObj[key] = true;
arr_unique.push(a);
}
});
arr_unique;//[1, "1", 2, 3, 4, 5]
于是现在还能这么写
let arr = [1,'1', 2, 3, 2, 4, 5, 4, 1];
let set = new Set(arr);
let arr_unique = Array.from(set);//Array新增了一个静态方法Array.from,可以把类似数组的对象转换为数组
arr_unique;//[1, "1", 2, 3, 4, 5]
除了Array.from,我们也可以这么转化数组
let set = new Set(['a','b','c']);
let arr = [...set];
arr;//['a','b','c']
而利用Array与Set的相互转化,还可以很容易地实现并集(Union)和交集(Intersect)
let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
let union = new Set([...a, ...b]);
union;// [1, 2, 3, 4]
let intersect = new Set([...a].filter(x => b.has(x)));
intersect;// [2, 3]
总结
与Array相比:
- Set中存储的元素是唯一的,而Array中可以存储重复的元素。
- Set中遍历元素的方式:Set通过for…of…,而Array通过for…in…。
- Set是集合,不能像数组用下标取值。
原文链接:https://www.qcloud.com/community/article/592399001489391635
ES6 中的 Set的更多相关文章
- ES6中的模板字符串和新XSS Payload
ES6中的模板字符串和新XSS Payload 众所周知,在XSS的实战对抗中,由于防守方经常会采用各种各样严格的过滤手段来过滤输入,所以我们使用的XSS Payload也会根据实际情况作出各种各样的 ...
- ES5和ES6中的继承 图解
Javascript中的继承一直是个比较麻烦的问题,prototype.constructor.__proto__在构造函数,实例和原型之间有的 复杂的关系,不仔细捋下很难记得牢固.ES6中又新增了c ...
- ES6中块作用域之于for语句是怎样的?
在ES6中新加了快作用域的概念(C语言就有,作为类c语言的js,当然应该加上),算是很好理解. { let i; } console.log(i);// i is not defined 在代码块当中 ...
- ES6中的var let const应如何选择
javascript世界里面的每个人都在说有关ECMAScript 6 (ES6,也称作ES 2015)的话题,对象的巨大变化 ( 类 , super() , 等), 函数 (默认参数等), 以及模块 ...
- Nodejs与ES6系列4:ES6中的类
ES6中的类 4.1.class基本语法 在之前的javascript语法中是不存在class这样的概念,如果要通过构造函数生成一个新对象代码 function Shape(width,height) ...
- ES6中Arguments和Parameters用法解析
原文链接 译文 ECMAScript 6 (也称 ECMAScript 2015) 是ECMAScript 标准的最新版本,显著地完善了JS中参数的处理方式.除了其它新特性外,我们还可以使用rest参 ...
- ES6中的Class
对于javascript来说,类是一种可选(而不是必须)的设计模式,而且在JavaScript这样的[[Prototype]] 语言中实现类是很蹩脚的. 这种蹩脚的感觉不只是来源于语法,虽然语法是很重 ...
- ES5和ES6中对于继承的实现方法
在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...
- ES6中的高阶函数:如同 a => b => c 一样简单
作者:Sequoia McDowell 2016年01月16日 ES6来啦!随着越来越多的代码库和思潮引领者开始在他们的代码中使用ES6,以往被认为是"仅需了解"的ES6特性变成了 ...
- 深入理解 JavaScript 异步系列(3)—— ES6 中的 Promise
第一部分,Promise 加入 ES6 标准 原文地址 http://www.cnblogs.com/wangfupeng1988/p/6515855.html 未经作者允许不得转载! 从 jquer ...
随机推荐
- python网页下载
python 2.7版本下可以运行 import urllib2 def getHtml(url): response = None requset = None headers = {'User-A ...
- zookeeper分布式算法和部署
算法摘要 安装 配置 监控 创建节点 二阶段提交(Two-Phase Commit) 投票和执行 协调者向参与者发送事务内容,询问是否可以提交,各参与者节点执行事务并向协调者反馈 如果所有参与者反馈y ...
- Unity 游戏开发技巧集锦之使用cookie类型的纹理模拟云层的移动
Unity 游戏开发技巧集锦之使用cookie类型的纹理模拟云层的移动 使用cookie类型的纹理模拟云层的移动 现实生活中,当阳光直射大地,而天空中又有很多云时,云层的影子总是会投射在大地上,风吹着 ...
- 【模式匹配】更快的Boyer
1. 引言 前一篇中介绍了字符串KMP算法,其利用失配时已匹配的字符信息,以确定下一次匹配时模式串的起始位置.本文所要介绍的Boyer-Moore算法是一种比KMP更快的字符串匹配算法,它到底是怎么快 ...
- Linux中mysql的操作
一.mysql服务操作 二.数据库操作 三.数据表操作 四.修改表结构 五.数据备份和恢复 六.卸载数据库
- 【BZOJ 2839】 2839: 集合计数 (容斥原理)
2839: 集合计数 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 399 Solved: 217 Description 一个有N个元素的集合有2 ...
- 【lct】bzoj2002 [Hnoi2010]Bounce 弹飞绵羊
lct板子,此题主要有cut操作和link操作. #include<cstdio> #include<iostream> #include<cstring> #in ...
- 洛谷P1462 通往奥格瑞玛的道路
题目背景 在艾泽拉斯大陆上有一位名叫歪嘴哦的神奇术士,他是部落的中坚力量 有一天他醒来后发现自己居然到了联盟的主城暴风城 在被众多联盟的士兵攻击后,他决定逃回自己的家乡奥格瑞玛 题目描述 在艾泽拉斯, ...
- python开发_difflib字符串比较
在python的difflib中 HtmlDiff:比较后以html方法展示 我们比较的是字符串: 'hello world!' 和 'hElLO Wor2d!' 具体代码: from difflib ...
- [转]Android:Activity+Fragment及它们之间的数据交换(一)
2014-05-18 来源:Android:Activity+Fragment及它们之间的数据交换(一) 简介: 为什么要用Fragment?使用Fragment可以在一个Acti ...