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

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

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

在許多情況下，需要比較多個(gè)列表，獲取它們有或沒有交集、差集等等，在 Javascript 有一個(gè)數(shù)據(jù)類型可以很好的實(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ù)組等其他集合類型不同，Set 可用于列表比較，并用于檢測(cè)集合中是否存在某個(gè)項(xiàng)。

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

Javascript Set

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

這意味著在集合中存儲(chǔ) undefined、null 和 NaN 將只會(huì)存儲(chǔ)一次，即使是 NaN !== NaN ，它通常應(yīng)用于對(duì)象類型的存儲(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ì)稱差集 intersectionDifference

• 判斷兩個(gè)集合是否為子集 isSubset

• 判斷兩個(gè)集合是否為超集 isSuperset

下面就以這三個(gè)場(chǎng)合來介紹 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)單的方法來檢查是否為不為空的有效的集合。

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ì)稱差集 intersectionDifference

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

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)建后可以公開修改該集合的方法，如 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 不限于上面這些操作，之前有介紹過可以用來合并數(shù)組去重，由于 Set 和 Array 相互轉(zhuǎn)換很簡(jiǎn)單，因此可以用到 Array 的場(chǎng)合可以優(yōu)先考慮一下 Set ，因?yàn)樵趦?nèi)存使用上， Set 比 Array 占用更少。

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

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

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

廣告

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