编程技术文章分享与教程

网站首页 > 技术文章 正文

JS短文 | 3分钟了解下 JS Sets 集合

hmc789 2024-11-24 16:50:50 技术文章 2 ℃

作者:Kyle Cook

网站:Web Dev Simplified Blog

字数:1000 字 (非直译)

阅读: 3 分钟

一、开篇语

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

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对象十分常用,关于JS Maps集合 文章的介绍大家可以去看下这篇文章 JS短文 | 5分钟了解 JS Maps 对象

二、如何使用Sets

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

1、创建Set(Creating A Set)

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

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

2、添加元素(Adding Items)

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

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,如下段代码所示:

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方法,传递你想查找的值,其返回布尔值。

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

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

5、移除值(Removing Values)

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

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

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

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

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

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、删除重复的内容

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

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、判断列表的内容是否唯一性

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

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

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

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

六、结束语

Sets 集合是一个很好数据类型,当我们需要执行确保列表唯一性业务场景时,可以使用它代替数组。今天的内容就到这里,感谢你的阅读。

Tags:

标签列表
最新留言