在許多情況下,需要比較多個列表,獲取它們有或沒有交集、差集等等,在 Javascript 有一個數據類型可以很好的實現這些需求,那就是 Set

Set對象就像一個數組,但是僅包含唯一項。Set對象是值的集合,可以按照插入的順序迭代它的元素。 Set中的元素只會出現一次,即 Set 中的元素是唯一的。是用來合并數組并去重的好方法,在文章《Vue開發中可以使用的ES6特征》有簡單提到。

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

什么是 Set

Set 對象是值的集合,可以按照插入的順序迭代它的元素,元素只會出現一次,即 Set 是不按特定順序存儲的且值唯一的集合。與堆棧、隊列和數組等其他集合類型不同,Set 可用于列表比較,并用于檢測集合中是否存在某個項。

Set 是一種抽象數據類型,它是由其行為定義的,類似堆棧和隊列數據結構。由于key-key的特性,這一點與 Map 類似,詳情可以參閱《ECMAScript 6的Map映射》。

Javascript Set

Javascript 中的 Set 是非常基礎和簡單的,它不像其他語言那樣提供通用的集操作功能。它使用了一種獨特的算法(不是基于嚴格的相等 === )來檢測元素是否相同。

這意味著在集合中存儲 undefinednullNaN 將只會存儲一次,即使是 NaN !== NaN ,它通常應用于對象類型的存儲。

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

從上面的執行結果可以得出以下結論:

  • 雖然 NaNNaN 不相等,但是在 Set 集合里面只會存在一個
  • undefinedInfinitySet 集合里面只會存在一個

基本 Set 的使用本文就不介紹了,可以參閱 mozilla 網站。

什么時候使用 Set

當需要對特定列表執行比較和判斷是否相等時,可以使用 Set,下面大家描述一下適用的場合,主要就是數據里的集合操作:

  • 獲取兩個集合的并集 union
  • 獲取兩個集合的差集 difference
  • 獲取兩個集合的交集 intersection
  • 獲取兩個集合的對稱差集 intersectionDifference
  • 判斷兩個集合是否為子集 isSubset
  • 判斷兩個集合是否為超集 isSuperset

下面就以這三個場合來介紹 Set 的相關操作。

Set 操作

在數學中,每當談論集合時,都可以執行一些操作,實際上,Set 是數學有限集的計算機實現方式。

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

對于示例代碼,只用了一個簡單的方法來檢查是否為不為空的有效的集合。

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

并集 union

union 操作將合并多個 Set 對象并返回合并后的結果。實現上將當前集和給定集合并到一個數組中并創建它,從而返回一個新的集合。

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

差集 difference

difference 操作將返回一個新的集合,新集合只包含在一個集合中并且不在另一個集合中的元素,即數學的差集概念。

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

交集 intersection

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

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;
}

對稱差集 intersectionDifference

intersectionDifference 操作將返回其中包含兩個集合沒有交集的所有元素的新集合。

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

子集 subset

isSubset 操作將判斷兩個集合是否為子集關系(當一個集合的所有項都包含在另一個集合中時)。實現上首先檢查兩個集合的大小,如果一個集合更大,則它不能是另一個集合的子集,然后對于每個項目,它檢查它是否存在于另一個中。

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

超集 superset

isSuperset 操作將判斷兩個集合是否為超集關系。超集是子集的反操作。當一個集合包含另一個較小或相等大小的集合的所有項目時,它就是一個超集。

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

靜態 Set

靜態Set 是一個始終包含它初始化元素的集合,不能添加、刪除、清除元素。Javascript Set 不是靜態的,它總能在創建后可以公開修改該集合的方法,如 adddelete ,為避免集合被修改,可以創建一個新的 Set ,將其修改方法重置 。

class StaticSet extends SetHelper {
    constructor(items) {
        super(items);

        this.add = undefined;
        this.delete = undefined;
        this.clear = undefined;
    }
}

使用

現在就可以使用上面定義的方法操作兩個 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 ]

總結

Set 不限于上面這些操作,之前有介紹過可以用來合并數組去重,由于 SetArray 相互轉換很簡單,因此可以用到 Array 的場合可以優先考慮一下 Set ,因為在內存使用上, SetArray 占用更少。