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

網(wǎng)站建設哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、小程序設計、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了集賢免費建站歡迎大家使用！

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

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

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

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

什么是 Set

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

Set 是一種抽象數(shù)據(jù)類型，它是由其行為定義的，類似堆棧和隊列數(shù)據(jù)結構。由于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 }

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

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

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

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

什么時候使用 Set

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

• 獲取兩個集合的并集 union

• 獲取兩個集合的差集 difference

• 獲取兩個集合的交集 intersection

• 獲取兩個集合的對稱差集 intersectionDifference

• 判斷兩個集合是否為子集 isSubset

• 判斷兩個集合是否為超集 isSuperset

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

Set 操作

在數(shù)學中，每當談論集合時，都可以執(zhí)行一些操作，實際上，Set 是數(shù)學有限集的計算機實現(xiàn)方式。

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

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

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

并集 union

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

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

差集 difference

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

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

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 操作將判斷兩個集合是否為子集關系（當一個集合的所有項都包含在另一個集合中時）。實現(xiàn)上首先檢查兩個集合的大小，如果一個集合更大，則它不能是另一個集合的子集，然后對于每個項目，它檢查它是否存在于另一個中。

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

靜態(tài) Set

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

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

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

使用

現(xiàn)在就可以使用上面定義的方法操作兩個 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 不限于上面這些操作，之前有介紹過可以用來合并數(shù)組去重，由于 Set 和 Array 相互轉(zhuǎn)換很簡單，因此可以用到 Array 的場合可以優(yōu)先考慮一下 Set ，因為在內(nèi)存使用上， Set 比 Array 占用更少。

“JavaScript中Set的含義和用法是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

網(wǎng)站欄目：JavaScript中Set的含義和用法是什么
鏈接分享：http://vcdvsql.cn/article34/iipsse.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、、小程序開發(fā)、企業(yè)網(wǎng)站制作、定制網(wǎng)站、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)