JavaScript Set集合
Jacshuo Lv3

一、开篇语

你也许看过或曾经写过类似的代码:

1
2
3
4
5
6
const uniqueList = [ 1, 2, 3, 4, 5 ]
const newNumber = 4

if( !uniqueList.include( newNumber ) ) {
uniqueList.add( newNumber )
}

这段代码本身没啥问题,但是你要创建唯一项列表时,数组通常不是最好的选择,这时候 JS Set集合 则派上用场啦。

Set集合其实是JS的Class类,该类你可以像常规数组一样存储内容,但是其有一个重要的特性,强调内容的唯一性。这意味着Set集合
是一个唯一性的列表集合(uniqueList) ,如果我们试图向其添加重复的内容时,集合则不会添加此内容。这一特点,对于确保列表的唯一性非常重要,关于其应用场景,文末将会介绍到。

JS的Maps集合 与Set集合 非常相似,只是其在键/值字典查找应用场景替代Object对象十分常用。

二、如何使用Sets

集合和数组非常相似,但两者之间大部分的属性和方法又有不同。

1、创建Set(Creating A Set)

前面说过 Set集合是一个Class类,创建Set集合时,我们需要进行实例化,刚实例化时,则是一个空Set集合,如果向其填充值,我们可以传递可迭代的列表,例如数组,如下段代码所示:

1
2
const emptySet = new Set()
const itemSet = new Set([1, 2, 3, 4])

2、添加元素(Adding Items)

实例化Set集合后,你很可能需要一个方法,往里填充内容。这很简单,我们使用add方法即可,由于add方法返回Set集合本身,我们可以使用链式语法进行添加内容,示例代码如下:

1
2
3
4
5
6
const itemSet = new Set()

itemSet.add(1)
itemSet.add(2)
itemSet.add(3).add(4) // Chaining
// [1, 2, 3, 4]

3、获取值(Getting Values)

到目前为止,获取元素的值是数组和Set集合最大的区别,在数组中,我们可以通过索引的方式获取对应的值,但是在
Set集合时,不能按索引的方式获取具体的值,如果你这么做了,则始终会返回undefined,如下段代码所示:

1
2
3
4
5
6
7
8
const array = [1, 2]
const itemSet = new Set(array)

console.log(array[0])
// 1

console.log(itemSet[0])
// undefined

虽然你不能像数组那样通过索引方式访问具体的值,但是你可能需要检查某个值是否存在或者遍历集合元素,这是Set集合中最常见的应用场景。

4、检查值是否存在(Checking For Values)

有时候,你需要检查集合中是否存在你想找的值,你可以使用has方法,传递你想查找的值,其返回布尔值。

1
2
3
4
5
6
const itemSet = new Set([1, 2, 3, 4])

itemSet.has(1)
// true
itemSet.has(5)
// false

5、移除值(Removing Values)

你可能要删除具体的值,这对于Set集合也十分容易,你可以使用delete方法。

1
2
3
4
5
const itemSet = new Set([1, 2, 3, 4])

itemSet.delete(1)
itemSet.has(1)
// false

6、迭代集合(Iterating Over A Set)

迭代的集合方法比较多,但是最常见的就是使用forEach方法,其使用方法和数组的forEach方法类似。

1
2
3
4
5
6
7
8
9
const itemSet = new Set([1, 2, 3, 4])

itemSet.forEach(item => {
console.log(item)
})
// 1
// 2
// 3
// 4

三、其它有用的方法和属性

你可以使用size属性获取Set集合的长度。
你可以使用clear()方法清空Set集合。

四、Set应用场景

很明显,Set集合的唯一性,对于一些业务场景的应用十分有用。

1、删除重复的内容

如果你的数组内容中包含重复的内容,你想进行去重,你该怎么做呢?首先将数组转换成集合,利用唯一性将重复的内容删掉,然后将处理过的集合对象再转换成数组,示例代码如下。

1
2
3
4
5
const arrayWithDups = [1, 1, 2, 3, 3]
const itemSet = new Set(arrayWithDups)
const array = [...itemSet] // Convert Set to array
console.log(array)
// [1, 2, 3]

2、判断列表的内容是否唯一性

基于上面的例子,我们可以更进一步,通过集合的长度是否相等,来判断一个数组列表是否具有唯一性,示例代码如下:

1
2
3
4
5
const arrayWithDups = [1, 1, 2, 3, 3]
const itemSet = new Set(arrayWithDups)
const isUnique = itemSet.size === arrayWithDups.length
console.log(isUnique)
// false

五、删除列表的元素很容易

删除数组中的元素并不是特别轻松,到目前为止也没有比较好的方法(虽然有方法,但是理解起来有些绕)。但是Set则不一样,它提供最接近人类删除的思维方式
delete()方法进行删除,上面已介绍过。

  • 本文标题:JavaScript Set集合
  • 本文作者:Jacshuo
  • 创建时间:2022-05-02 00:24:29
  • 本文链接:https://blog.imade.life/2022/05/02/Set集合/
  • 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!