結合、交差、差分などが JavaScript セットに追加されます

の JavaScript Set この言語は ES2015 仕様で導入されましたが、常に不完全であるように見えました。 それが変わろうとしている。

セットは、各値が 1 回だけ出現する値のコレクションです。 ES2015 バージョンでは、 Set、利用可能な機能は、メンバーシップの作成、追加、削除、およびチェックを中心に展開されていました。 Set。 複数のセットを操作または比較したい場合は、独自の関数を作成する必要がありました。 ありがたいことに、 TC39ECMAScript 仕様に取り組むために設立された委員会であり、ブラウザもこれに取り組んでいます。 現在、次のような関数が表示されています。 union、 intersection そして difference JavaScript の実装で。

新しい機能について説明する前に、JavaScript セットで何ができるのかをまとめてから、本題に移ります。 新しいセット関数 そしてその それらをサポートする JavaScript エンジン 下に。

ES2015 JavaScript セットは何をしますか?

JavaScript の ES2015 バージョンを見てみましょう Set できる。 いくつかの例を使用するのが最も簡単です。

あなたはできる を構築する Set 引数なしの場合、空の値が得られます Set。 または、配列のような反復可能オブジェクトを提供して、 Set。

const languages = new Set(["JavaScript", "TypeScript", "HTML", "JavaScript"]);

Setには一意の値のみを含めることができるため、 Set 上記のメンバーは3名です。 これは、 size 財産。

languages.size;

// => 3

さらに要素を追加することもできます Set とともに add 関数。 すでに存在する要素を追加する Set 何もしません。

languages.add("JavaScript");

languages.add("CSS");

languages.size;

// => 4

から要素を削除できます。 Set と delete。

languages.delete("TypeScript");

languages.size;

// => 3

要素が次のメンバーであるかどうかを確認できます。 Set とともに has 関数。 の利点の 1 つは、 Set このチェックは一定時間で実行できるということです (○(1))、要素が Array 長さによって異なります Array (の上））。 使用する Setこのようなタスクの場合は、 意図的に効率的なコードを書くきれいな方法。

languages.has("JavaScript");

// => true

languages.has("TypeScript");

// => false

あなたはできる をループします Setの要素を使用して forEach または for...of ループ。 要素は、 Set。

languages.forEach(element => console.log(element));

// "JavaScript"

// "HTML"

// "CSS"

次からイテレータを取得することもできます。 Set を使用して keys そして values 機能 （実際には同等です）だけでなく、 entries 関数。

最後に、次のコマンドを使用して Set を空にすることができます。 clear 関数。

languages.clear();

languages.size;

// => 0

これは、ES2015 仕様バージョンの Set:

• Set一意の値のコレクションを処理するメソッドを提供します
• に要素を追加すると効率的です。 Set そして、それらが存在するかどうかをテストするために、 Set
• 変換する Array またはその他の反復可能 Set 重複をフィルタリングして除外する簡単な方法です

この実装では、次の間の操作が失われます。 Setただし。 を作成するとよいでしょう。 Set 他の 2 つのアイテムがすべて含まれています Sets (2 つの和集合 Sets)、次の 2 つを調べてください。 Setには共通点があるか (交差)、あるセットに存在せず、別のセットに存在するものを見つけます (相違点)。 最近までは、独自の関数を提供する必要がありました。

新しい Set 関数とは何ですか?

の Set メソッドの提案では、次のメソッドが追加されます。 Set インスタンス: union、 intersection、 difference、 symmetricDifference、 isSubsetOf、 isSupersetOf、 そして isDisjointFrom。

これらのメソッドの一部は SQL 結合に似ており、コードとともに結果を説明するために使用します。 各関数の動作の例をいくつか見てみましょう。

Chrome 122 以降または Safari 17 以降では、以下のコード例のいずれかを試すことができます。

Set.prototype.union(その他)

セットの和集合は、いずれかのセットに存在するすべての要素を含むセットです。

const frontEndLanguages = new Set(["JavaScript", "HTML", "CSS"]);

const backEndLanguages = new Set(["Python", "Java", "JavaScript"]);

const allLanguages = frontEndLanguages.union(backEndLanguages);

// => Set {"JavaScript", "HTML", "CSS", "Python", "Java"}

この例では、最初の 2 つのセットのすべての言語が 3 番目のセットに含まれています。 要素を追加する他のメソッドと同様に、 Set、重複は削除されます。

これは SQL に相当します。 FULL OUTER JOIN 2つのテーブルの間。

const frontEndLanguages = new Set(["JavaScript", "HTML", "CSS"]);

const backEndLanguages = new Set(["Python", "Java", "JavaScript"]);

const frontAndBackEnd = frontEndLanguages.intersection(backEndLanguages);

// => Set {"JavaScript"} 

const frontEndLanguages = new Set(["JavaScript", "HTML", "CSS"]);

const backEndLanguages = new Set(["Python", "Java", "JavaScript"]);

const onlyFrontEnd = frontEndLanguages.difference(backEndLanguages);

// => Set {"HTML", "CSS"} 

const onlyBackEnd = backEndLanguages.difference(frontEndLanguages);

// => Set {"Python", "Java"}

const frontEndLanguages = new Set(["JavaScript", "HTML", "CSS"]);

const backEndLanguages = new Set(["Python", "Java", "JavaScript"]);

const onlyFrontEnd = frontEndLanguages.symmetricDifference(backEndLanguages);

// => Set {"HTML", "CSS", "Python", "Java"} 

const onlyBackEnd = backEndLanguages.symmetricDifference(frontEndLanguages);

// => Set {"Python", "Java", "HTML", "CSS"}

const frontEndLanguages = new Set(["JavaScript", "HTML", "CSS"]);

const declarativeLanguages = new Set(["HTML", "CSS"]);

declarativeLanguages.isSubsetOf(frontEndLanguages);

// => true

frontEndLanguages.isSubsetOf(declarativeLanguages);

// => false

frontEndLanguages.isSubsetOf(frontEndLanguages);

// => true

const frontEndLanguages = new Set(["JavaScript", "HTML", "CSS"]);

const declarativeLanguages = new Set(["HTML", "CSS"]);

declarativeLanguages.isSupersetOf(frontEndLanguages);

// => false

frontEndLanguages.isSupersetOf(declarativeLanguages);

// => true

frontEndLanguages.isSupersetOf(frontEndLanguages);

// => true

const frontEndLanguages = new Set(["JavaScript", "HTML", "CSS"]);

const interpretedLanguages = new Set(["JavaScript", "Ruby", "Python"]);

const compiledLanguages = new Set(["Java", "C++", "TypeScript"]);

interpretedLanguages.isDisjointFrom(compiledLanguages);

// => true

frontEndLanguages.isDisjointFrom(interpretedLanguages);

// => false