Set Composition 让您的生活更轻松

终于!当 set 过去被引入时,它已经让我们的生活变得更好了。我们能够轻松生成独特的列表,而且在查找和设置这些列表上的项目方面也有更好的性能。

那太好了,但我们仍然缺少其他语言所拥有的一些东西。这是真的,因为我们就是这样。随着 2024 年 set 中添加新的组合方法,我们最终将能够通过简单的调用进行并集、交集、差集等操作。

事不宜迟,让我们开始吧。

不同之处

返回一个新的 set,其中包含第一个 set 中存在但第二个 set 中不存在的元素。

Set Composition 让您的生活更轻松

示例:您想查看本周哪些用户访问了上个月没有访问过的网站。

如何使用?

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 中都存在的值。

Set Composition 让您的生活更轻松

示例:您正在将电子书捆绑添加到购物车,但您已经有其中一些书籍了。

如何使用?

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,其值在两个组中都不重复。

Set Composition 让您的生活更轻松

示例:检查商店之间积压的商品,以查看哪些商品可以换货。

如何使用?

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,其中包含两个组中的值,但不重复任何值。

Set Composition 让您的生活更轻松

示例:您和您的朋友想要合并播放列表,但有些音乐是相同的。

如何使用?

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。

Set Composition 让您的生活更轻松

示例:查看有属于其他组的产品。

如何使用?

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)); // falseconsole.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)); // falseconsole.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 的超集。

Set Composition 让您的生活更轻松

示例:了解用户是否属于公司群组。

如何使用?

const itdepartment = new set([1, 2, 3, 4]);const genzfromtoronto = new set([3, 4]);console.log(itdepartment.issupersetof(genzfromtoronto)); // trueconsole.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/issupersetofhttps://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/set/issubsetof

现在你已经准备好了我不后悔在你的项目中使用它!

如果您也对它、另一个功能感到兴奋,或者想了解其他内容,请告诉我。直到下次o/

以上就是Set Composition 让您的生活更轻松的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1490597.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 13:18:03
下一篇 2025年12月19日 13:18:10

相关推荐

  • js如何获取鼠标当前位置

    要获取鼠标当前位置,核心是通过事件对象的坐标属性实现,具体需根据需求选择合适的坐标系并注意性能与兼容性。1. 使用event.clientx/clienty获取鼠标相对于浏览器可视窗口的坐标,原点为可视区左上角,适合无需考虑滚动的场景;2. 使用event.pagex/pagey获取相对于整个文档的…

    好文分享 2025年12月20日
    000
  • 八皇后问题是什么?回溯法解决八皇后

    八皇后问题的解决方案是使用回溯法,即逐行放置皇后并检查列与对角线冲突,若无法继续则回退至上一行尝试其他列;通过列、主副对角线标记数组可将冲突检测优化至O(1),该方法可扩展至N皇后及带障碍等变体问题。 八皇后问题,说白了,就是在8×8的棋盘上放置八个皇后,让它们彼此之间不能互相攻击。这意味…

    2025年12月20日
    000
  • JS如何实现断点续传

    断点续传通过文件分片与HTTP Range/Content-Range头实现,客户端用Blob.slice切片,结合fetch/XHR传输,localStorage或IndexedDB持久化进度,服务器需支持206状态码与分片合并,上传时带Content-Range标识位置,下载时用Range请求续…

    2025年12月20日
    000
  • 什么是宏任务和微任务?它们在事件循环中如何执行?

    1.宏任务和微任务的核心执行顺序是:先执行所有同步代码,再清空微任务队列,然后执行一个宏任务,再清空微任务,如此循环;2.微任务(如promise.then、queuemicrotask)优先级高于宏任务(如settimeout、i/o回调),确保异步逻辑的即时性和一致性;3.理解该机制能精准调试异…

    2025年12月20日 好文分享
    000
  • 什么是Context?跨组件通信

    Context是React中用于解决prop drilling问题的机制,它允许数据在组件树中跨层级传递而无需手动逐层传递props。通过createContext创建上下文,Provider提供数据,useContext消费数据,适用于主题、语言等全局状态管理。相比传统props传递,Contex…

    2025年12月20日
    000
  • 什么是原型链?原型继承的原理

    原型链是JavaScript实现继承的核心机制,它通过对象的__proto__属性与构造函数的prototype属性链接,形成一条属性查找链。当访问对象属性时,若自身不存在,则沿原型链向上搜索,直至Object.prototype或null。prototype是函数独有的属性,指向实例的共享原型对象…

    2025年12月20日
    000
  • JS如何提取字符串内容

    答案:JS中提取特定模式字符串的最佳实践是使用正则表达式,因其能高效处理复杂模式匹配。对于结构化字符串,优先采用JSON.parse()等解析方法;面对嵌套结构,可结合栈或递归实现精准提取。 JavaScript里要从字符串里抠出想要的那部分内容,方法其实挺多的,核心无非就是定个范围、找个标志,或者…

    2025年12月20日
    000
  • 什么是优先队列?JS如何实现优先队列

    优先队列按元素优先级处理而非入队顺序,核心操作为插入和取出,基于二叉堆实现高效,适用于任务调度、最短路径等需动态排序的场景。 优先队列并非传统意义上的“先进先出”或“后进先出”队列,它更像一个“按重要性排队”的系统。在这里,每个元素都携带一个优先级,系统会根据这个优先级来决定谁先被处理。优先级高的元…

    2025年12月20日
    000
  • 什么是层序遍历?队列实现层序遍历

    层序遍历之所以重要,是因为它提供了一种广度优先的全局视角,适用于寻找最短路径、按层处理节点等问题,如求树的最小深度或判断完全二叉树;它不仅可用于二叉树,还可推广到图的遍历、网络爬虫、社交网络分析、迷宫求解等场景;与深度优先遍历相比,层序遍历使用队列实现,按层访问,空间复杂度与树的宽度相关,适合解决最…

    2025年12月20日
    000
  • 什么是记忆化?记忆化的应用场景

    记忆化在递归和动态规划中的典型应用是避免重复计算子问题,例如斐波那契数列中将时间复杂度从指数级优化到线性级;它还可用于web服务缓存、数据处理中间结果存储及ui渲染优化等场景;使用时需权衡空间换时间的代价,注意内存占用、纯函数要求、键的生成成本及缓存淘汰策略,避免因过度使用导致内存溢出或代码复杂度增…

    2025年12月20日
    000
  • js 如何实现选项卡切换

    javascript实现选项卡切换的核心是通过事件监听动态切换类名来控制内容显示与隐藏,具体做法是为每个选项卡按钮绑定点击事件,触发时先移除所有按钮和内容面板的激活状态,再为当前按钮和对应内容添加“active”类,并更新aria属性以支持无障碍访问,同时可通过事件委托优化性能、使用data属性提升…

    2025年12月20日
    000
  • js如何实现倒计时功能

    要确保javascript倒计时在不同设备和浏览器上的准确性,核心是避免完全依赖客户端时间,可通过服务器时间校准来解决:在页面加载时从后端获取准确时间戳,计算本地与服务器时间差,在倒计时逻辑中使用校准后的时间;2. 使用setinterval虽常见,但存在精度偏差,可结合requestanimati…

    2025年12月20日
    000
  • JS如何实现动态导入?import()的使用

    动态导入通过import()实现运行时按需加载,返回Promise以异步加载模块,适用于减少初始加载时间、代码分割和条件加载,结合构建工具与框架(如React.lazy、Vue异步组件)可优化性能,需妥善处理加载状态与错误以提升用户体验。 JavaScript通过 import() 函数实现了动态导…

    2025年12月20日
    000
  • js中如何解析csv

    简单的split方法无法正确处理包含逗号、换行符或双引号的字段,容易导致数据解析错误;2. 推荐使用papa parse等成熟库,因其支持自动分隔符检测、引号字段处理、流式解析和web worker,能可靠应对复杂csv场景;3. 对于大型csv文件,应采用流式解析和web workers技术,分块…

    2025年12月20日 好文分享
    000
  • js 如何用isArray判断变量是否为数组

    array.isarray() 是判断变量是否为数组最可靠的方法,因为它直接返回布尔值且不受上下文影响,相比 typeof(对数组返回 “object”)和 instanceof(在跨 iframe 时失效)更精确安全,能正确识别跨全局环境的数组,而其他方法如 object.…

    2025年12月20日
    000
  • js 怎样用rest获取除第一个外的剩余元素

    获取数组中除第一个元素之外的剩余元素,可以使用解构赋值结合剩余参数或slice()方法。1. 使用解构赋值和剩余参数:const [first, …rest] = arr; return rest; 该方法简洁现代,若数组为空或仅有一个元素,rest为空数组。2. 使用slice()方法…

    2025年12月20日
    000
  • js中如何实现防抖函数

    防抖函数的核心是延迟执行函数并在延迟内重新计时,确保事件停止触发后才执行,适用于搜索建议、窗口调整等场景;1. func.apply(context, args)用于绑定this上下文和传递参数,确保函数在正确上下文中执行;2. 使用apply而非func(…args)是为了精确控制th…

    2025年12月20日 好文分享
    000
  • JS如何实现多线程计算

    JavaScript通过Web Workers实现类似多线程计算的效果,利用后台线程执行耗时任务而不阻塞主线程,结合SharedArrayBuffer与Atomics可实现高效数据共享与同步,适用于CPU密集型或大数据量处理场景。 JavaScript本身在主线程是单线程运行的,这意味着它一次只能执…

    2025年12月20日
    000
  • JS如何实现错误边界?错误的捕获

    答案:JavaScript错误边界需组合多种机制。1. try…catch仅捕获同步错误,无法处理异步或Promise内部错误;2. window.onerror捕获全局同步错误如语法错误、资源加载失败;3. window.onunhandledrejection专门捕获未处理的Prom…

    2025年12月20日
    000
  • JS如何实现3D渲染

    javascript实现3d渲染的核心是利用webgl api,并通过three.js等高层库简化开发;1. 直接使用webgl需手动管理顶点、矩阵和着色器,适合高阶定制但难度大;2. 更常用的是three.js,封装了场景、相机、渲染器、几何体、材质、网格、光源和控制器等对象,极大降低开发门槛;3…

    2025年12月20日
    000

发表回复

登录后才能评论
关注微信