Set集合

说到集合,在ES6之前我们只能通过数组来实现一个集合,但是数组的索引值只能是数字类型,于是以前的开发者也会利用对象来存储数据。然而,对象也没有那么毫无缺点,对象的key只能是字符串类型。于是ES6起,便支持了两个新的集合类型- Map与Set。

Set集合不允许存在重复的元素,使用Object.is方法来对比两个元素是否相等。Set集合更多的场景是用来查看集合内是否存在某个元素,Map集合大多用于频繁存取的操作。

如何声明一个Set集合呢?ES6定义了一个新的内置构造函数 - Set,我们可以通过它来实例化一个Set集合:

1
const set = new Set();

声明以后我们可以对集合进行增、删(分为删除某个元素或者全部清除)、查(没有改)。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
const set = new Set();
set.add(5);
set.add('5');

console.log(set.has(5)); // true
console.log(set.has('5')); // true

console.log(set.size); // 2

set.delete(5);

console.log(set.has(5)); // false
console.log(set.size); // 1

set.clear();

console.log(set.has('5')); //false
console.log(set.size); //0

我们向Set集合中添加元素使用了add方法,但是这种方法需要逐个添加,令人苦恼。所幸,在我们实例化Set集合时,可以向Set构造函数传入一个参数,该参数为可迭代对象(数组、Map、Set等),之后Set构造函数会在底层帮我们地逐个添加:

1
2
3
4
5
6
7
const set = new Set([1,2,3,4]);

console.log(set.has(1)); // true
console.log(set.has(2)); // true
console.log(set.has(3)); // true
console.log(set.has(4)); // true
consoel.log(set.size); // 4

Set构造函数并不只有这一个特点,它还会检查传入的可迭代对象中是否存在重复元素,重复的元素不会被添加到Set集合中:

1
2
const set = new Set([1, 2, 3, 4, 5, 5, 5, 5, 5]);
console.log(set.size) // 5

不知道你看到这个特点会想到什么,我倒是想到了数组去重可以使用这个特性。哦对不起!介绍数组去重前还需要介绍个别的知识点,有一个语法叫做展开运算符,它可以作用于Set集合,将Set集合转换成数组:

1
2
3
4
const set = new Set([1, 2, 3]);
const arr = [...set];

console.log(arr); //[1,2,3]

OK,我们现在可以利用Set集合来实现一个数组去重函数:

1
const unique = array => [...new Set(array)]; 

写到这里可能你会问,如何遍历Set集合,是的,ES6都给你准备好了。Set集合也类似于数组和Map集合,拥有forEach方法,且拥有三个参数,分别为 当前元素、当前元素、当前Set集合。为什么有两个当前元素呢,其实是为了和Map、数组的forEach保持一致而已。

1
2
3
4
5
6
7
8
const set = new Set([1,2,3]);
set.forEach((item, item, ownSet) => {
  console.log(item, item, ownSet === set);
});

// 1 1 true
// 2 2 true
// 3 3 true

介绍到此为止吧,其实还应该介绍weakMap,但是我还没学会呢。。尴尬😂。

updatedupdated2020-06-262020-06-26