首頁 > web前端 > js教程 > Set Composition 讓您的生活更輕鬆

Set Composition 讓您的生活更輕鬆

WBOY
發布: 2024-08-21 06:17:32
原創
575 人瀏覽過

終於!當 Set 過去被引入時,它已經讓我們的生活變得更好了。我們能夠輕鬆產生獨特的列表,而且在尋找和設定這些列表上的項目方面也具有更好的效能。

這很棒,但我們仍然缺少其他語言所擁有的一些東西。這是真的,因為我們就是這樣。隨著 2024 年 Set 中加入新的組合方法,我們最終將能夠透過簡單的呼叫進行並集、交集、差集等操作。

話不多說,讓我們開始吧。

不同之處

傳回一個新 Set,其中包含第一個 Set 中存在但第二個 Set 中不存在的元素。

Make your life easier with Set Compositions

範例:您想要查看本週哪些使用者造訪了上個月未造訪過的網站。

如何使用?

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


路口

傳回一個新的 Set,其中只包含兩個 Set 中都存在的值。

Make your life easier with Set Compositions

範例:您正在將電子書捆綁添加到購物車,但您已經有其中一些書籍了。

如何使用?

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


對稱差

傳回一個新的 Set,其值在兩組中都不重複。

Make your life easier with Set Compositions

範例:檢查商店之間積壓的商品,以檢查哪些商品可以換貨。

如何使用?

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/symmetryDifference


聯盟

傳回新的 Set,其中包含兩組中的值,但不重複任何值。

Make your life easier with Set Compositions

範例:您和您的朋友想要合併播放列表,但有些音樂是相同的。

如何使用?

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;如果它們至少有一個共同值,則為 false。

Make your life easier with Set Compositions

範例:查看有屬於其他組別的產品。

如何使用?

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


是超集/子集嗎?

這兩個功能非常相似。它們都返回布林值,並且是直接相反的。如果該 Set 是另一個 Set 的超集,Superset 會傳回 true;如果 Set 是另一個 Set 的子集,Subset 將會傳回 true。

我將這些函數放在一起,因為知道其中一個函數的答案就足以了解另一個函數。 Set 只能是子集 Set 的超集。

Make your life easier with Set Compositions

範例:了解使用者是否屬於公司群組。

如何使用?

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/

以上是Set Composition 讓您的生活更輕鬆的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板