Javascript在一些情況下是需要使用Set的。下面本篇文章就帶大家了解一下Set，介紹一下什么是Set、什么時(shí)候使用 Set、Set的數(shù)據(jù)操作（交集、差集、交集、對(duì)稱(chēng)差集）。

在許多情況下，需要比較多個(gè)列表，獲取它們有或沒(méi)有交集、差集等等，在 Javascript 有一個(gè)數(shù)據(jù)類(lèi)型可以很好的實(shí)現(xiàn)這些需求，那就是 Set 。

Set對(duì)象就像一個(gè)數(shù)組，但是僅包含唯一項(xiàng)。Set對(duì)象是值的集合，可以按照插入的順序迭代它的元素。 Set中的元素只會(huì)出現(xiàn)一次，即 Set 中的元素是唯一的。

文章涉及的代碼地址：https://codepen.io/quintiontang/pen/rNmNbbY

什么是 Set

Set 對(duì)象是值的集合，可以按照插入的順序迭代它的元素，元素只會(huì)出現(xiàn)一次，即 Set 是不按特定順序存儲(chǔ)的且值唯一的集合。與堆棧、隊(duì)列和數(shù)組等其他集合類(lèi)型不同，Set 可用于列表比較，并用于檢測(cè)集合中是否存在某個(gè)項(xiàng)。

Set 是一種抽象數(shù)據(jù)類(lèi)型，它是由其行為定義的，類(lèi)似堆棧和隊(duì)列數(shù)據(jù)結(jié)構(gòu)。由于key-key的特性，這一點(diǎn)與 Map 類(lèi)似。

Javascript Set

Javascript 中的 Set 是非常基礎(chǔ)和簡(jiǎn)單的，它不像其他語(yǔ)言那樣提供通用的集操作功能。它使用了一種獨(dú)特的算法（不是基于嚴(yán)格的相等 === ）來(lái)檢測(cè)元素是否相同。

這意味著在集合中存儲(chǔ) undefined、null 和 NaN 將只會(huì)存儲(chǔ)一次，即使是 NaN !== NaN ，它通常應(yīng)用于對(duì)象類(lèi)型的存儲(chǔ)。

const setTest = new Set([0, -0, Infinity,null, undefined, null, NaN, NaN, Infinity,null]); console.log(setTest);  // Set { 0, Infinity, null, undefined, NaN }

從上面的執(zhí)行結(jié)果可以得出以下結(jié)論：

• 雖然 NaN 和 NaN 不相等，但是在 Set 集合里面只會(huì)存在一個(gè)
• undefined 和 Infinity 在 Set 集合里面只會(huì)存在一個(gè)

基本 Set 的使用本文就不介紹了，可以參閱 mozilla 網(wǎng)站。

什么時(shí)候使用 Set

當(dāng)需要對(duì)特定列表執(zhí)行比較和判斷是否相等時(shí)，可以使用 Set，下面大家描述一下適用的場(chǎng)合，主要就是數(shù)據(jù)里的集合操作：

• 獲取兩個(gè)集合的并集 union
• 獲取兩個(gè)集合的差集 difference
• 獲取兩個(gè)集合的交集 intersection
• 獲取兩個(gè)集合的對(duì)稱(chēng)差集 intersectionDifference
• 判斷兩個(gè)集合是否為子集 isSubset
• 判斷兩個(gè)集合是否為超集 isSuperset

下面就以這三個(gè)場(chǎng)合來(lái)介紹 Set 的相關(guān)操作。

Set 操作

在數(shù)學(xué)中，每當(dāng)談?wù)摷蠒r(shí)，都可以執(zhí)行一些操作，實(shí)際上，Set 是數(shù)學(xué)有限集的計(jì)算機(jī)實(shí)現(xiàn)方式。

為了在代碼中更好的展示 Set 操作，示例代碼將 擴(kuò)展 Javascript Set 以繼承其屬性和方法，并為其增加其它的方法。

對(duì)于示例代碼，只用了一個(gè)簡(jiǎn)單的方法來(lái)檢查是否為不為空的有效的集合。

class SetHelper extends Set {     /**      * 驗(yàn)證集合是否為有效集合      * @param {*} set      * @returns      */     _isValid = (set) => {         return set && set instanceof Set && set.size > 0;     }; }

并集 union

union 操作將合并多個(gè) Set 對(duì)象并返回合并后的結(jié)果。實(shí)現(xiàn)上將當(dāng)前集和給定集合并到一個(gè)數(shù)組中并創(chuàng)建它，從而返回一個(gè)新的集合。

union(set) {     if (!this._isValid(set)) return new SetHelper();     return new SetHelper([...this, ...set]); }復(fù)制代碼

差集 difference

difference 操作將返回一個(gè)新的集合，新集合只包含在一個(gè)集合中并且不在另一個(gè)集合中的元素，即數(shù)學(xué)的差集概念。

difference(set) {     if (!this._isValid(set)) return new SetHelper();     const differenceSet = new SetHelper();     this.forEach((item) => {         !set.has(item) && differenceSet.add(item);     });     return differenceSet; }復(fù)制代碼

交集 intersection

intersection 操作返回只包含兩個(gè)集合共同擁有的元素的新集合。實(shí)現(xiàn)上將遍歷較小的集合（避免不必要的檢查）并檢查每一項(xiàng)是否存在于較大的集合中并將其添加到交集中，遍歷完成后將返回交集。

intersection(set) {     const intersectionSet = new SetHelper();     if (!this._isValid(set)) return intersectionSet;     const [smallerSet, biggerSet] =         set.size <= this.size ? [set, this] : [this, set];     smallerSet.forEach((item) => {         biggerSet.has(item) && intersectionSet.add(item);     });     return intersectionSet; }

對(duì)稱(chēng)差集 intersectionDifference

intersectionDifference 操作將返回其中包含兩個(gè)集合沒(méi)有交集的所有元素的新集合。

intersectionDifference(set) {     if (!this._isValid(set)) return new SetHelper();     return new SetHelper([         ...this.difference(set),         ...set.difference(this),     ]); }

子集 subset

isSubset 操作將判斷兩個(gè)集合是否為子集關(guān)系（當(dāng)一個(gè)集合的所有項(xiàng)都包含在另一個(gè)集合中時(shí)）。實(shí)現(xiàn)上首先檢查兩個(gè)集合的大小，如果一個(gè)集合更大，則它不能是另一個(gè)集合的子集，然后對(duì)于每個(gè)項(xiàng)目，它檢查它是否存在于另一個(gè)中。

isSubset(set) {     if (!this._isValidSet(set)) return false;     return (         this.size <= set.size && [...this].every((item) => set.has(item))     ); }

超集 superset

isSuperset 操作將判斷兩個(gè)集合是否為超集關(guān)系。超集是子集的反操作。當(dāng)一個(gè)集合包含另一個(gè)較小或相等大小的集合的所有項(xiàng)目時(shí)，它就是一個(gè)超集。

isSuperset(set) {     if (!this._isValidSet(set)) return false;     return (         this.size >= set.size && [...set].every((item) => this.has(item))     ); }

靜態(tài) Set

靜態(tài)Set 是一個(gè)始終包含它初始化元素的集合，不能添加、刪除、清除元素。Javascript Set 不是靜態(tài)的，它總能在創(chuàng)建后可以公開(kāi)修改該集合的方法，如 add、delete ，為避免集合被修改，可以創(chuàng)建一個(gè)新的 Set ，將其修改方法重置 。

class StaticSet extends SetHelper {     constructor(items) {         super(items);          this.add = undefined;         this.delete = undefined;         this.clear = undefined;     } }

使用

現(xiàn)在就可以使用上面定義的方法操作兩個(gè) Set，如下：

const setA = new StaticSet(new Set([1, 2, 3, 4])); const setB = new StaticSet(new Set([3, 4, 5, 6])); console.log([...setA.union(setB)]); // [ 1, 2, 3, 4, 5, 6 ] console.log([...setA.difference(setB)]); // [ 1, 2 ] console.log([...setA.intersection(setB)]); // [ 3, 4 ] console.log([...setB.intersectionDifference(setA)]); // [ 5, 6, 1, 2 ]

總結(jié)

Set 不限于上面這些操作，之前有介紹過(guò)可以用來(lái)合并數(shù)組去重，由于 Set 和 Array 相互轉(zhuǎn)換很簡(jiǎn)單，因此可以用到 Array 的場(chǎng)合可以?xún)?yōu)先考慮一下 Set ，因?yàn)樵趦?nèi)存使用上， Set 比 Array 占用更少。