ES6-Set

46次阅读

共计 1626 个字符,预计需要花费 5 分钟才能阅读完成。

ES6 之前,数组是 javaScript 里面的唯一一个集合对象。如果你接触过其他编程语言,可能会知道用来表示集合的数据结构往往还有两种:Set 和 Map。
Set 没有重复的元素的列表。而 Map 的元素是一个个的键值对。这一篇我们只说 Set,Map 会另起一篇文章。接下来我们就来看看 Set 的相关知识:
一:创建 Set
1: 通过 new Set()创建一个空列表

let set = new Set();

以上我们就成功地创建好了一个 Set 列表,只是它暂时没有任何元素。在后面的内容,我们可以看到怎样为它添加元素。

2: 以一个可迭代对象初始化列表

let array = [1, 2];
let map = new Map([['name', 'mike'],['age', 25]]);
let setOfArray = new Set(array);
let setOfMap = new Set(map);

setOfArray.forEach(function (value, key, set) {console.log(`${key}: ${value}`);
});

setOfMap.forEach(function (value, key, set) {console.log(`${key}: ${value}`);
});

以上例子里面的 setOfArray.forEach()我们得到的打印结果是:

1: 1
2: 2

从这个打印结果,我们也可以看得出来,Set 元素的 key 和 value 是同一个值。

以上例子里面的 setOfMap.forEach()我们得到的打印结果是:

name,mike: name,mike
age,25: age,25

虽然我们可以用 Map 初始化一个 Set,但是显然这么做没什么意义。通常我们还是更多会使用 Array。
二:Set 的增
当我们通过给 new Set()不传递任何参数而创建一个空 Set 之后,一般还需要通过 add() 方法来添加元素:

let set = new Set();
set.add(1);
set.add('1');
console.log(set.size); // 2

在上面的例子里,我们分别添加了数字型的和字符串形的 1,最终我们得到两个元素。这是 Set 区别于普通对象的地方:一般的对象,数值型的属性名会被强制转换为字符串型;但是 Set 不会。

三:Set 的删
想要删除 Set 里面的所有元素,只需要调用 clear() 方法:

let set = new Set([1, 2, 3]);
set.clear();
console.log(set.size); // 0

四:Set 的查
我们可以通过 has() 方法来查询某个元素是否在 Set 集合里面:

let set = new Set([1, 2, 3]);
console.log(set.has(1)); //true
console.log(set.has('1'));//false

五:Set 的减
delete() 方法可用于从 Set 集合里面除去某个元素:

let set = new Set([1, 2, 3]);
set.delete(1);
console.log(set.has(1)); //fasle
console.log(set.size); // 2

七:Set 的使用场景
从前面的文章中我们陆陆续续了解到了 Set 集合的一些重要特性,比如:

1: Set 没有重复元素
2: Set 元素的 key 和 value 为同一值
3: 我们可以使用可迭代对象初始化 Set 

根据这些特性,我们可以实现 Array 的去重。基本的思路就是:

1: 要处理的 Array 集合作为参数来初始化 Set 集合,这时我们得到一个没有重复元素的 Set
2: 通过展开运算符(...), 把第一步得到的 Set 集合转换为一个数组

代码示例:

let originalArray = [1, 1, 2, 2, 3, 4];
let set = new Set(originalArray);
let newArray = [...set];
console.log(newArray); // [1, 2, 3, 4]

以上,就是 Set 的一些基本特性,语法和使用场景。

正文完
 0