”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > Set Composition 让您的生活更轻松

Set Composition 让您的生活更轻松

发布于2024-11-09
浏览:270

最后!当 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/

版本声明 本文转载于:https://dev.to/klauskpm/make-your-life-easier-with-set-compositions-45j?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • React 的基本核心概念
    React 的基本核心概念
    在快速发展的 Web 开发世界中,React 仍然是构建动态和高性能用户界面的基石。无论您是经验丰富的开发人员还是刚刚起步的开发人员,了解 React 的核心概念对于充分发挥其潜力至关重要。在本文中,我们将探讨 React 的基本原理,从它的库状态到 hooks 的强大功能,并为您提供增强 Reac...
    编程 发布于2024-11-09
  • 如何防止 Chrome 的自动填充更改您的字体?
    如何防止 Chrome 的自动填充更改您的字体?
    克服 Chrome 的自动填充字体更改挑战在 Windows 上遇到 Chrome 的自动填充功能时,您可能会遇到烦人的字体更改问题。将鼠标悬停在已保存的用户名上时,字体大小和样式会发生变化,从而破坏表单的对齐方式。虽然您可以对输入应用固定宽度来缓解此问题,但更有效的解决方案在于完全防止字体更改。要...
    编程 发布于2024-11-09
  • Em 和 Rem:有什么区别?
    Em 和 Rem:有什么区别?
    简介:rem和em都是CSS中的大小单位。 Rem 是 root 元素的字体大小。 Em 是本地上下文的字体大小。 em 单位 是从印刷版式世界借来的,它是一个允许设置元素的字体大小相对于其组件层次结构中最接近的声明字体大小的单位。 rem 单元 是 root em 的缩写,始终引用根元素(即 元...
    编程 发布于2024-11-09
  • 在 Go 中使用 WebSocket 进行实时通信
    在 Go 中使用 WebSocket 进行实时通信
    构建需要实时更新的应用程序(例如聊天应用程序、实时通知或协作工具)需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方!今天,我们将探讨如何在 Go 中使用 WebSocket,以便您可以向应用程序添加实时功能。 在这篇文章中,我们将介绍: WebSoc...
    编程 发布于2024-11-09
  • 修复 D3.js GeoJSON 绘图问题:如何纠正缠绕顺序?
    修复 D3.js GeoJSON 绘图问题:如何纠正缠绕顺序?
    D3.js 错误绘制 GeoJSON:缠绕顺序问题当尝试使用 geoJSON 数据可视化俄罗斯地区时,程序员遇到了一个问题其中 D3.js 绘制单个黑色矩形而不是所需的地图轮廓。这种差异是由于 geoJSON 文件中坐标的缠绕顺序问题引起的。了解缠绕顺序GeoJSON 坐标可以按顺时针或逆时针顺序排...
    编程 发布于2024-11-09
  • 多重继承的问题
    多重继承的问题
    Java不支持类的多重继承,标准方法不规避此限制,因为类可以维护状态(使用实例变量),但接口不能。 默认方法提供了行为多重继承的有限形式,允许一个类通过默认方法从多个接口继承行为。 当一个类实现的两个接口具有相同的默认方法时,可能会发生冲突,例如两个接口 Alpha 和 Beta 都使用了 res...
    编程 发布于2024-11-09
  • 如何避免 getImageData() 中的“画布已被跨域数据污染”错误?
    如何避免 getImageData() 中的“画布已被跨域数据污染”错误?
    如何避免 getImageData() 中出现“画布已被跨源数据污染”错误使用 getImageData( 时) 方法从画布检索像素数据,您可能会遇到错误“画布已被跨源数据污染”。当您尝试访问受从其他域加载的数据影响的画布上的像素数据时,会出现此错误。要了解此错误的原因,请考虑大多数浏览器中实现的安...
    编程 发布于2024-11-09
  • ## Promise.all:Node.js 中是并行执行还是顺序执行?
    ## Promise.all:Node.js 中是并行执行还是顺序执行?
    Promise.all:Node.js 中并行执行还是顺序执行?问题: Promise.all(iterable) 是否顺序处理 Promise 或并行?答案: Promise.all 不执行 Promise;相反,它只是同时等待多个承诺。 Promise 的计算和结果由调用 Promise.all...
    编程 发布于2024-11-09
  • 如何克服 Splinter/Selenium 中的 ElementClickInterceptedException:被其他拦截时单击元素的指南
    如何克服 Splinter/Selenium 中的 ElementClickInterceptedException:被其他拦截时单击元素的指南
    被其他人拦截时单击元素:在 Splinter/Selenium 中处理 ElementClickInterceptedException抓取网页时,单击某些元素可能会具有挑战性,因为模糊元素的存在。在 Selenium 中,当尝试单击被另一个元素遮挡的元素时,会引发 ElementClickInte...
    编程 发布于2024-11-09
  • Java Sound 可以播放 MP3 文件吗?
    Java Sound 可以播放 MP3 文件吗?
    Java Sound 默认不支持 MP3。对于特定 JRE 中支持的类型,请检查 AudioSystem.getAudioFileTypes()。有一种方法可以添加 MP3 支持。将基于 JMF 的 mp3plugin.jar 添加到项目的运行时类路径中。虽然 javax.sound.sampled...
    编程 发布于2024-11-09
  • HTML 创新
    HTML 创新
    HTML5 的创新方向错误。在某种程度上,我是一个有连续性的思考者,并尊重任何进步都是好的。然而,更进一步,语义标签的决定是糟糕的。 这是正确的!我对那件事采取了政治态度! ⭐ 语义元素一定是由非 HTML 开发人员想到的。书面经验没有价值,真正的 100% 对于 HTML5 语义元素的真实非营销术...
    编程 发布于2024-11-09
  • Redux 工具包:React Thunk 和 React Saga。向 Vishal Tiwari 学习。
    Redux 工具包:React Thunk 和 React Saga。向 Vishal Tiwari 学习。
    React Thunk 和 React Saga 是用于处理 React 应用程序中副作用的中间件库,特别是用于管理 API 调用等异步操作。两者通常与 Redux 一起使用,但用途和方法略有不同。 React Thunk 1. 概述: React ...
    编程 发布于2024-11-09
  • 如何使用并发在 Go 中高效地读写 CSV 文件?
    如何使用并发在 Go 中高效地读写 CSV 文件?
    Go 中高效的 CSV 读写Go 中高效读写 CSV 文件的任务涉及优化 I/O 操作。考虑以下代码片段,该代码片段读取 CSV 文件,对数据执行计算,并将结果写入新的 CSV 文件:package main import ( "encoding/csv" "f...
    编程 发布于2024-11-09
  • 以下是一些标题选项,请记住问题格式:

简单直接:

* 如何用JavaScript动态调整输入字段宽度?
* 创建响应式输入字段:JavaScript So
    以下是一些标题选项,请记住问题格式: 简单直接: * 如何用JavaScript动态调整输入字段宽度? * 创建响应式输入字段:JavaScript So
    动态调整输入字段的宽度以适应其输入动态调整输入字段的宽度以匹配其内容长度可以增强用户体验防止布局混乱。虽然设置固定宽度可能会导致多余的空间或截断文本,但动态方法可确保输入字段具有视觉吸引力和功能性。不幸的是,使用 CSS 的 min-width 属性设置最小宽度不适用于输入字段。然而,现代浏览器提供...
    编程 发布于2024-11-09
  • 如何使用 JavaScript 从 iFrame 重定向父窗口?
    如何使用 JavaScript 从 iFrame 重定向父窗口?
    从 iFrame 重定向父窗口如果父窗口中嵌入了 iFrame,则可能需要重定向父窗口窗口的位置更改为新的 URL。为了实现这一点,JavaScript 提供了一个简单的解决方案。使用 JavaScript 重定向父窗口在 iFrame 的 JavaScript 代码中,您可以使用以下方法: 重定向...
    编程 发布于2024-11-09

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3