JavaScript中Set的含義和用法是什么

本篇內容介紹了“JavaScript中Set的含義和用法是什么”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

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

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

Set對象就像一個數組，但是僅包含唯一項。Set對象是值的集合，可以按照插入的順序迭代它的元素。 Set中的元素只會出現一次，即 Set 中的元素是唯一的。

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

什么是 Set

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

Set 是一種抽象數據類型，它是由其行為定義的，類似堆棧和隊列數據結構。由于key-key的特性，這一點與 Map 類似。

Javascript Set

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

這意味著在集合中存儲 undefined、null 和 NaN 將只會存儲一次，即使是 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 }

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

• 雖然 NaN 和 NaN 不相等，但是在 Set 集合里面只會存在一個

• undefined 和 Infinity 在 Set 集合里面只會存在一個

基本 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 不是靜態的，它總能在創建后可以公開修改該集合的方法，如 add、delete ，為避免集合被修改，可以創建一個新的 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 不限于上面這些操作，之前有介紹過可以用來合并數組去重，由于 Set 和 Array 相互轉換很簡單，因此可以用到 Array 的場合可以優先考慮一下 Set ，因為在內存使用上， Set 比 Array 占用更少。

“JavaScript中Set的含義和用法是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！