[JavaScript] Setオブジェクトの新しいメソッドを紹介するよ

🐣 はじめに

JavascriptのSetオブジェクトに新たなメソッドが追加され、主要なブラウザーエンジンで利用できるようになったので今回はこれらのメソッドについて調査したものを紹介してみようと思います。

Setオブジェクトの基本的な使い方については 「setオブジェクト」の検索結果 - Qiita をご参照ください。

🆕 Set メソッドの新機能について

クロスブラウザサポートを備えた新しいメソッドの要点は以下の通りです。

メソッド名	説明	返り値
union()	このセットと指定されたセット内のすべての要素を含む新しいセットを返します。	Setオブジェクト
intersection()	このセットと指定されたセットの両方の要素を含む新しいセットを返します。	Setオブジェクト
difference()	このセットにはあるが指定されたセットにはない要素を含む新しいセットを返します。	Setオブジェクト
symmetricDifference()	どちらかのセットに含まれる要素を含む新しいセットを返しますが、両方に含まれる要素は返しません。	Setオブジェクト
isSubsetOf()	セットのすべての要素が特定のセット内にあるかどうかを示すブール値を返します。	Boolean
isSupersetOf()	指定されたセットのすべての要素がこのセット内にあるかどうかを示すブール値を返します。	Boolean
isDisjointFrom()	このセットに特定のセットと共通する要素がないかどうかを示すブール値を返します。	Boolean

それぞれの機能についてコードで解説していきます。

union

union() は指定された集合に含まれるすべての要素を返します。この際指定された集合内に同一の要素がある場合、重複は省かれます。

ベン図を使用すると次のようになります。

引用：Set.prototype.union() - JavaScript | MDN

const set1 = new Set(["foo", "bar", "baz"]);
const set2 = new Set(["hoge", "fuga", "foo", "piyo"]);

const unionSet = set1.union(set2);

unionSet.forEach((item) => console.log(item));
// => foo
// => bar
// => baz
// => hoge
// => fuga
// => piyo

intersection

intersection() は集合の共通部分を返し、両方の集合に存在する要素を確認できます。

ベン図を使用すると次のようになります。

引用：Set.prototype.intersection() - JavaScript | MDN

const set1 = new Set(["foo", "bar", "piyo"]);
const set2 = new Set(["hoge", "foo", "piyo"]);

const intersectionSet = set1.intersection(set2);

intersectionSet.forEach((item) => console.log(item));
// => foo
// => piyo

symmetric difference

symmetricDifference() は、どちらか片方のセットに含まれる要素を返します。

ベン図を使用すると次のようになります。

引用：Set.prototype.symmetricDifference() - JavaScript | MDN

const set1 = new Set(["foo", "bar", "piyo"]);
const set2 = new Set(["hoge", "foo", "piyo"]);

const setNotBoth = set1.symmetricDifference(set2);

setNotBoth.forEach((item) => console.log(item));
// => bar
// => hoge

difference

difference() は、片方の集合に含まれ、もう片方の集合には含まれない要素を返します。

ベン図を使用すると次のようになります。

引用：Set.prototype.difference() - JavaScript | MDN

const set1 = new Set(["foo", "bar", "piyo"]);
const set2 = new Set(["hoge", "foo", "piyo"]);

const set1Only = set1.difference(set2);
const set2Only = set2.difference(set1);

set1Only.forEach((item) => console.log("set1のみに含まれる: ", item));
// => set1のみに含まれる:  bar

set2Only.forEach((item) => console.log("set2のみに含まれる: ", item));
// => set2のみに含まれる:  hoge

isSubsetOf / isSupersetOf

ここまでのメソッドでは新しい Set オブジェクトを返しましたが、以下で紹介するメソッドでは指定した Set オブジェクトの状態の真偽値を返します。

isSubsetOf() は引数で渡したセットのすべての要素が指定された集合内にあるかどうかを示す真偽値を返します。

isSupersetOf() は引数で渡したセットのすべての要素が指定された集合内にあるかどうかを示す真偽値を返します。

ベン図を使用すると次のようになります。

isSubsetOf()	isSupersetOf()

引用：
Set.prototype.isSubsetOf() - JavaScript | MDN
Set.prototype.isSupersetOf() - JavaScript | MDN

const fours = new Set([4, 8, 12, 16]);
const evens = new Set([2, 4, 6, 8, 10, 12, 14, 16, 18]);

console.log(fours.isSubsetOf(evens)); 
// => true

console.log(fours.isSupersetOf(evens)); 
// => false

isDisjointFrom

isDisjointFrom() は引数で渡したセットの要素が指定されたセット内と共通の要素がないかの真偽値を返します。

ベン図を使用すると次のようになります。

引用：Set.prototype.isDisjointFrom() - JavaScript | MDN

const set1 = new Set(["foo", "bar", "baz"]);
const set2 = new Set(["hoge", "fuga", "piyo"]);

console.log(set1.isDisjointFrom(set2)); 
// => true(2つのSetに共通の要素がない)

🏋️‍♀️ まとめ

Setオブジェクトの新しいメソッドが主要なブラウザでも使用できるようになりより便利にSetが使えるようになりそうですね
（もし間違っている箇所などあればコメントで教えて下さい）

🌈 参考URL

• Set - JavaScript | MDN