JavaScriptの設定とは何ですか?いつ使用しますか?使い方？

JavaScript では Set を使用する必要がある場合があります。次の記事では、Set を理解し、Set とは何か、Set をいつ使用するか、および Set のデータ操作 (交差、差集合、交差、対称差集合) を紹介します。

多くの場合、複数のリストを比較して、共通部分や差異があるかどうかなどを取得する必要があります。JavaScript にはこれをうまく実現できるデータ型があります。需要、つまり Set です。

Setオブジェクトは配列に似ていますが、一意の項目のみが含まれています。 Setオブジェクトは値のコレクションであり、その要素は挿入順に反復できます。 Set の要素は 1 回だけ表示されます。つまり、Set の要素は一意です。

記事に含まれるコード アドレス: https://codepen.io/quintiontang/pen/rNmNbbY

Set## とは

#Set オブジェクトは値のコレクションです。その要素は挿入順に反復できます。要素は 1 回だけ表示されます。つまり、Set は特定の順序ではなく、一意の値の保存されたコレクションです。スタック、キュー、配列などの他のコレクション タイプとは異なり、セットはリストの比較やセット内の項目の存在の検出に使用できます。

Set は、スタックやキューのデータ構造と同様に、その動作によって定義される抽象データ型です。 key-key の特性により、これは Map に似ています。

Javascript Set

JavaScript の Set は非常に基本的でシンプルですが、他のものほど機能はありません。言語 一般的な集合演算関数。独自のアルゴリズム (厳密な等価性 === に基づくものではない) を使用して、要素が同一であるかどうかを検出します。

これは、

unknown、null、および NaN をコレクションに格納すると、たとえ NaN であっても、1 回だけ格納されることを意味します。 != = 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 セットには
• unknown が 1 つだけ存在し、Infinity には # が 1 つだけ存在します。 Set set ##基本的な Set の使用方法はこの記事では紹介しません。
mozilla

Web サイトを参照してください。

Set を使用する場合

特定のリストを比較し、等しいかどうかを判断する必要がある場合は、Set を使用できます。

、適用可能な状況、主にデータ内の集合演算について説明します。

2 つの集合の和集合を取得します

union

• 2 つの集合を取得します差分セットdifference
• 2 つのセットの共通部分を取得intersection
• 2 つのセットの対称差分セットを取得intersectionDifference
• 2 つのセットがサブセットであるかどうかを判断するisSubset
• 2 つのセットがスーパーセットであるかどうかを判断するisSuperset
• 次のようになりますこれら 3 つのケースに基づいて、
Set

に関連する操作を紹介します。

集合

演算数学では、集合について話すときは常に、実行できる演算がいくつかあります。実際には、 Set

は、数学的有限集合のコンピューター実装です。

コード内の Set

操作をより適切に示すために、サンプル コードは Javascript

Set を拡張してそのプロパティとメソッドを継承し、それに他のメソッドを追加します。 。 サンプル コードでは、空ではない有効なコレクションであるかどうかを確認するための簡単なメソッドのみが使用されています。

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

Union

union

##union この操作では、複数の

Set

オブジェクトと結合した結果を返します。実装は、現在のセットと指定されたセットを配列にマージして作成し、新しいセットを返します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">union(set) { if (!this._isValid(set)) return new SetHelper(); return new SetHelper([...this, ...set]); }</pre><div class="contentsignin">ログイン後にコピー</div></div>差異セット差異

差異 この操作は、1 つのセット要素にのみ含まれる新しいセットを返します。別のセット内にあるものとそうでないもの、つまり差分セットの数学的概念です。

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 この操作は、両方のコレクションに共通の要素のみを含む新しいコレクションを返します。実装は、小さいコレクションを反復処理して (不必要なチェックを回避し)、各項目が大きいコレクションに存在するかどうかを確認して交差に追加します。交差は、走査の完了後に返されます。

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 この操作は、交差のないすべての要素を含むセットを返します。 2 つのセットの新しいコレクションです。

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

サブセット サブセット

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の設定とは何ですか?いつ使用しますか?使い方？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。