“

作者：Kyle Cook
?????? 網(wǎng)站：Web Dev Simplified Blog
?????? 字?jǐn)?shù)：1583 字 (非直譯)
?????? 閱讀: 3 分鐘

一、開篇語

你也許看過或曾經(jīng)寫過類似的代碼：

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

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

這段代碼本身沒啥問題，但是你要創(chuàng)建唯一項(xiàng)列表時(shí)，數(shù)組通常不是最好的選擇，這時(shí)候 JS Set集合 則派上用場啦。

Set集合 其實(shí)是 JS 的 Class類，該類你可以像常規(guī)數(shù)組一樣存儲內(nèi)容，但是其有一個(gè)重要的特性，強(qiáng)調(diào)內(nèi)容的唯一性。這意味著 Set集合 是一個(gè)唯一性的列表集合（uniqueList） ，如果我們試圖向其添加重復(fù)的內(nèi)容時(shí)，集合則不會添加此內(nèi)容。這一特點(diǎn)，對于確保列表的唯一性非常重要，關(guān)于其應(yīng)用場景，文末將會介紹到。

JS Maps集合 與 Set集合 非常相似，只是其在鍵/值字典查找應(yīng)用場景替代Object對象十分常用，關(guān)于JS Maps集合 文章的介紹大家可以去看下這篇文章《JS短文 | 5分鐘了解 JS Maps 對象》

二、如何使用Sets

集合和數(shù)組非常相似，但兩者之間大部分的屬性和方法又有不同。

1、創(chuàng)建Set（Creating A Set）

前面說過 Set集合 是一個(gè) Class類，創(chuàng)建 Set集合時(shí)，我們需要進(jìn)行實(shí)例化，剛實(shí)例化時(shí)，則是一個(gè)空Set集合，如果向其填充值，我們可以傳遞可迭代的列表，例如數(shù)組，如下段代碼所示：

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

2、添加元素（Adding Items）

實(shí)例化 Set集合 后，你很可能需要一個(gè)方法，往里填充內(nèi)容。這很簡單，我們使用 add 方法即可，由于add方法返回Set集合本身，我們可以使用鏈?zhǔn)秸Z法進(jìn)行添加內(nèi)容，示例代碼如下：

const?itemSet?=?new?Set()

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

3、獲取值（Getting Values）

到目前為止，獲取元素的值是數(shù)組和Set集合最大的區(qū)別，在數(shù)組中，我們可以通過索引的方式獲取對應(yīng)的值，但是在 Set集合時(shí)，不能按索引的方式獲取具體的值，如果你這么做了，則始終會返回undefined，如下段代碼所示：

const?array?=?[1,?2]
const?itemSet?=?new?Set(array)

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

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

雖然你不能像數(shù)組那樣通過索引方式訪問具體的值，但是你可能需要檢查某個(gè)值是否存在或者遍歷集合元素，這是Set集合中最常見的應(yīng)用場景。

4、檢查值是否存在（Checking For Values）

有時(shí)候，你需要檢查集合中是否存在你想找的值，你可以使用 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方法，其使用方法和數(shù)組的 forEach方法類似。

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

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

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

• 你可以使用 size屬性 獲取 Set集合 的長度。
• 你可以使用 clear()方法 清空 Set集合。

四、Set應(yīng)用場景

很明顯，Set集合的唯一性，對于一些業(yè)務(wù)場景的應(yīng)用十分有用。

1、刪除重復(fù)的內(nèi)容

如果你的數(shù)組內(nèi)容中包含重復(fù)的內(nèi)容，你想進(jìn)行去重，你該怎么做呢？首先將數(shù)組轉(zhuǎn)換成集合，利用唯一性將重復(fù)的內(nèi)容刪掉，然后將處理過的集合對象在轉(zhuǎn)換成數(shù)組，示例代碼如下。

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、判斷列表的內(nèi)容是否唯一性

基于上面的例子，我們可以更進(jìn)一步，通過集合的長度是否相等，來判斷一個(gè)數(shù)組列表是否具有唯一性，示例代碼如下：

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

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

刪除數(shù)組中的元素并不是特別輕松，到目前為止也沒有比較好的方法（雖然有方法，但是理解起來有些繞）。但是 Set 則不一樣，它提供最接近人類刪除的思維方式 delete() 方法進(jìn)行刪除，上面已介紹過。

六、結(jié)束語

Sets 集合是一個(gè)很好數(shù)據(jù)類型，當(dāng)我們需要執(zhí)行確保列表唯一性業(yè)務(wù)場景時(shí)，可以使用它代替數(shù)組。今天的內(nèi)容就到這里，感謝你的閱讀。