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

一、开篇语

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

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

if (!uniqueList.includes(newNumber)) {
  uniqueList.push(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 集合是一个很好数据类型，当我们需要执行确保列表唯一性业务场景时，可以使用它代替数组。今天的内容就到这里，感谢你的阅读。