ホームページ > 記事 > ウェブフロントエンド > セット構成で作業を楽にしましょう
ついに! 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 をご覧ください
両方のグループの値を含む新しい Set を返しますが、値は繰り返されません。
例: あなたとあなたの友人はプレイリストを結合したいと考えていますが、一部の音楽は同じです。
使い方は?
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
詳細については、こちらをご覧ください:
これで、プロジェクトで使用するための 申し訳ありません の設定は完了です!
これについても興味がある場合、別の機能、または他の内容について知りたい場合はお知らせください。次回まで o/
以上がセット構成で作業を楽にしましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。