ついに！ Set が過去に導入されたとき、すでに私たちの生活は改善されていました。一意のリストを簡単に生成できましたが、それらのリスト上の項目の検索と設定のパフォーマンスも向上しました。

それは素晴らしかったですが、他の言語にはまだ欠けているものがいくつかありました。そしてこれは真実です、なぜなら私たちがそうだったからです。 2024 年に Set に追加された新しい合成メソッドにより、最終的に単純な呼び出しで和集合、積集合、差分などを実行できるようになります。

これ以上の苦労はせずに、早速始めましょう。

違い

最初の Set には存在するが 2 番目の Set には存在しない要素を含む新しい Set を返します。

例: 先月はアクセスしなかったが、今週はサイトにアクセスしたユーザーを確認したいとします。

使い方は?

const thisWeekUsers = new Set([1, 2, 3, 4]);
const lastMonthUsers = new Set([3, 4, 5, 6]);

const newUsers = thisWeekUsers.difference(lastMonthUsers);

console.log(newUsers); // Set(2) { 1, 2 }

昔だったらどうやってやっていたでしょうか?

const thisWeekUsers = [1, 2, 3, 4];
const lastMonthUsers = [3, 4, 5, 6];

let newUsers = thisWeekUsers.filter(x => !lastMonthUsers.includes(x));

console.log(newUsers); // (2) [1,2]

詳細については、https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/difference

交差点

両方のセットに存在する値のみを含む新しいセットを返します。

例: 電子書籍のバンドルをカートに追加していますが、それらの書籍の一部はすでにそこにあります。

使い方は?

const booksBundle = new Set([1, 2, 3, 4]);
const cart = new Set([3, 4, 5, 6]);

const booksToAdd = booksBundle.intersection(cart);

console.log(booksToAdd); // Set(2) { 3, 4 }

昔だったらどうやってやっていたでしょうか?

const booksBundle = [1, 2, 3, 4];
const cart = [3, 4, 5, 6];

const booksToAdd = booksBundle.filter(book => cart.includes(book));

console.log(booksToAdd); // (2) [3, 4]

詳細については、https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/intersection

対称的な差異

どちらのグループにも重複しない値を含む新しいセットを返します。

例: 店舗間で在庫過剰になっている商品をチェックし、交換可能な商品を確認する。

使い方は?

const firstStore = new Set([1, 2, 3, 4]);
const secondStore = new Set([3, 4, 5, 6]);

const overstockedItems = firstStore.symmetricDifference(secondStore);

console.log(overstockedItems); // Set(4) { 1, 2, 5, 6 }

昔だったらどうやってやっていたでしょうか?

const firstStore = [1, 2, 3, 4];
const secondStore = [3, 4, 5, 6];

const allItems = [firstStore, secondStore].flat();
const overstockedItems = allItems.filter(item => {
  return !firstStore.includes(item) || !secondStore.includes(item);
});

console.log(overstockedItems); // (4) [1, 2, 5, 6]

詳細については、https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/metricDifference

連合

両方のグループの値を含む新しいセットを返しますが、値は繰り返されません。

例: あなたと友達のプレイリストを結合したいと考えていますが、一部の音楽は同じです。

使い方は?

const yourPlaylist = new Set([1, 2, 3, 4]);
const friendPlaylist = new Set([3, 4, 5, 6]);

const mergedPlaylist = yourPlaylist.union(friendPlaylist);

console.log(mergedPlaylist); // Set(6) { 1, 2, 3, 4, 5, 6 }

昔だったらどうやってやっていたでしょうか?

const yourPlaylist = [1, 2, 3, 4];
const friendPlaylist = [3, 4, 5, 6];

const mergedPlaylist = new Set([yourPlaylist, friendPlaylist].flat());

console.log(mergedPlaylist); // (6) [1, 2, 3, 4, 5, 6]

詳細については、https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/union

からの素?

ブール値を返します。両方の Set に共通の値がない場合は true、少なくとも 1 つの共通の値がある場合は false です。

例: 他のグループに属する製品があることを確認してください。

使い方は?

const electronics = new Set([1, 2, 3, 4]);
const furniture = new Set([3, 4, 5, 6]);
const groceries = new Set(['apple']);

console.log(electronics.isDisjointFrom(furniture)); // false
console.log(electronics.isDisjointFrom(groceries)); // true

昔だったらどうやってやっていたでしょうか?

const electronics = [1, 2, 3, 4];
const furniture = [3, 4, 5, 6];
const groceries = ['apple'];

function isDisjoint(array1, array2) {
  return array1.every(item => !array2.includes(item));
}

console.log(isDisjoint(electronics, furniture)); // false
console.log(isDisjoint(electronics, groceries)); // true

詳細については、https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/isDisjointFrom

スーパーセット/サブセットは何ですか?

これら 2 つの関数は非常に似ています。どちらもブール値を返し、正反対です。 Set が別のスーパーセットの場合、Superset は true を返し、Set が別のサブセットの場合、Subset は true を返します。

これらの関数をまとめているのは、一方の答えがわかればもう一方も理解できるからです。 Set は、サブセット Set のスーパーセットのみになることができます。

例: ユーザーが会社グループの一員であるかどうかを理解します。

使い方は?

const itDepartment = new Set([1, 2, 3, 4]);
const genZFromToronto = new Set([3, 4]);

console.log(itDepartment.isSupersetOf(genZFromToronto)); // true
console.log(genZFromToronto.isSubsetOf(itDepartment)); // true

昔だったらどうやってやっていたでしょうか?

const itDepartment = [1, 2, 3, 4];
const genZFromToronto = [3, 4];

console.log(genZFromToronto.every(item => itDepartment.includes(item))); // true

詳細はこちら:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/isSupersetOf
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/isSubsetOf

これで、申し訳ありませんをプロジェクトで使用する設定が完了しました!

また、別の機能に興味がある場合、または他の内容について知りたい場合はお知らせください。次回まで o/