一、开篇语
你也许看过或曾经写过类似的代码:
1 | const uniqueList = [ 1, 2, 3, 4, 5 ] |
这段代码本身没啥问题,但是你要创建唯一项列表时,数组通常不是最好的选择,这时候 JS Set集合 则派上用场啦。
Set
集合其实是JS的Class类,该类你可以像常规数组一样存储内容,但是其有一个重要的特性,强调内容的唯一性。这意味着Set集合
是一个唯一性的列表集合(uniqueList) ,如果我们试图向其添加重复的内容时,集合则不会添加此内容。这一特点,对于确保列表的唯一性非常重要,关于其应用场景,文末将会介绍到。
JS的Maps
集合 与Set
集合 非常相似,只是其在键/值字典查找应用场景替代Object
对象十分常用。
二、如何使用Sets
集合和数组非常相似,但两者之间大部分的属性和方法又有不同。
1、创建Set(Creating A Set)
前面说过 Set集合是一个Class类,创建Set集合时,我们需要进行实例化,刚实例化时,则是一个空Set集合,如果向其填充值,我们可以传递可迭代的列表,例如数组,如下段代码所示:
1 | const emptySet = new Set() |
2、添加元素(Adding Items)
实例化Set集合后,你很可能需要一个方法,往里填充内容。这很简单,我们使用add
方法即可,由于add方法返回Set集合本身,我们可以使用链式语法进行添加内容,示例代码如下:
1 | const itemSet = new Set() |
3、获取值(Getting Values)
到目前为止,获取元素的值是数组和Set集合最大的区别,在数组中,我们可以通过索引的方式获取对应的值,但是在
Set集合时,不能按索引的方式获取具体的值,如果你这么做了,则始终会返回undefined
,如下段代码所示:
1 | const array = [1, 2] |
虽然你不能像数组那样通过索引方式访问具体的值,但是你可能需要检查某个值是否存在或者遍历集合元素,这是Set集合中最常见的应用场景。
4、检查值是否存在(Checking For Values)
有时候,你需要检查集合中是否存在你想找的值,你可以使用has
方法,传递你想查找的值,其返回布尔值。
1 | const itemSet = new Set([1, 2, 3, 4]) |
5、移除值(Removing Values)
你可能要删除具体的值,这对于Set集合也十分容易,你可以使用delete
方法。
1 | const itemSet = new Set([1, 2, 3, 4]) |
6、迭代集合(Iterating Over A Set)
迭代的集合方法比较多,但是最常见的就是使用forEach
方法,其使用方法和数组的forEach
方法类似。
1 | const itemSet = new Set([1, 2, 3, 4]) |
三、其它有用的方法和属性
你可以使用size
属性获取Set集合的长度。
你可以使用clear()
方法清空Set集合。
四、Set应用场景
很明显,Set
集合的唯一性,对于一些业务场景的应用十分有用。
1、删除重复的内容
如果你的数组内容中包含重复的内容,你想进行去重,你该怎么做呢?首先将数组转换成集合,利用唯一性将重复的内容删掉,然后将处理过的集合对象再转换成数组,示例代码如下。
1 | const arrayWithDups = [1, 1, 2, 3, 3] |
2、判断列表的内容是否唯一性
基于上面的例子,我们可以更进一步,通过集合的长度是否相等,来判断一个数组列表是否具有唯一性,示例代码如下:
1 | const arrayWithDups = [1, 1, 2, 3, 3] |
五、删除列表的元素很容易
删除数组中的元素并不是特别轻松,到目前为止也没有比较好的方法(虽然有方法,但是理解起来有些绕)。但是Set
则不一样,它提供最接近人类删除的思维方式delete()
方法进行删除,上面已介绍过。
- 本文标题:JavaScript Set集合
- 本文作者:Jacshuo
- 创建时间:2022-05-02 00:24:29
- 本文链接:https://blog.imade.life/2022/05/02/Set集合/
- 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!