首页  >  文章  >  web前端  >  Set Composition 让您的生活更轻松

Set Composition 让您的生活更轻松

WBOY
WBOY原创
2024-08-21 06:17:32545浏览

终于!当 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。

我将这些函数放在一起,因为知道其中一个函数的答案就足以了解另一个函数。集合只能是子集集合的超集。

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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn