JavaScript Set新增7个方法

大厂技术  高级前端  Node进阶
点击上方 程序员成长指北，关注公众号
回复1，加入高级Node交流群

前言

JavaScript Set 对象的操作方法现在已经成为 Baseline 的一部分，这意味着这些方法在所有主流浏览器中都有支持。

现在可以使用 JavaScript 中的 Set 方法来执行诸如 intersection 、 union 等集合操作。

庆祝：此网络特性现已在三大浏览器引擎中可用，并于 2024 年 6 月 11 日起成为基准的新增功能。

支持的浏览器：chrome（122）；edge（122）；firefox（127）；safari（127）

什么是 JavaScript 集合？

集合与数组类似，但每个值只能存储一次。例如，我们可以将一组项目列表添加到一个集合中，然后检查集合的结果。

【第3276期】明白如何使用 Array.sort(comparator) 方法排序数组？

集合是任何编程语言中不可或缺的数据结构。现在，您可以使用 JavaScript 的内置方法来执行集合操作。使用以下方法简化集合操作：

intersection()

intersection () 它返回一个包含此集合和给定集合中所有元素的新集合。

const odds = new Set([1, 3, 5, 7, 9]);
 const squares = new Set([1, 4, 9]);
 console.log(odds.intersection(squares)); // Set(2) { 1, 9 }

union()

nunion () 它返回一个包含此集合中所有元素和给定集合的新集合。

const evens = new Set([2, 4, 6, 8]);
 const squares = new Set([1, 4, 9]);
 console.log(evens.union(squares)); // Set(6) { 2, 4, 6, 8, 1, 9 }

difference()

difference () 它返回一个包含此集合中的元素但不包含给定集合中元素的新集合。

const odds = new Set([1, 3, 5, 7, 9]);
 const squares = new Set([1, 4, 9]);
 console.log(odds.difference(squares)); // Set(3) { 3, 5, 7 }

symmetricDifference()

symmetricDifference () 它返回一个包含此集合或给定集合中的元素的新集合，但不包含同时存在于这两个集合中的元素。

const evens = new Set([2, 4, 6, 8]);
 const squares = new Set([1, 4, 9]);
 console.log(evens.symmetricDifference(squares)); // Set(5) { 2, 6, 8, 1, 9 }

isSubsetOf()

isSubsetOf () 它返回一个布尔值，指示此集合中的所有元素是否都在给定的集合中。

const fours = new Set([4, 8, 12, 16]);
 const evens = new Set([2, 4, 6, 8, 10, 12, 14, 16, 18]);
 console.log(fours.isSubsetOf(evens)); // true

isSupersetOf()

它返回一个布尔值，指示给定集合中的所有元素是否都在此集合中。

const evens = new Set([2, 4, 6, 8, 10, 12, 14, 16, 18]);
 const fours = new Set([4, 8, 12, 16]);
 console.log(evens.isSupersetOf(fours)); // true

isDisjointFrom()

返回一个布尔值，指示此集合是否与给定集合没有公共元素。

const primes = new Set([2, 3, 5, 7, 11, 13, 17, 19]);
 const squares = new Set([1, 4, 9, 16]);
 console.log(primes.isDisjointFrom(squares)); // true

将代码更新为使用内置方法可以提高性能并减少技术债务。

观点

• Set 方法的普及提高了代码的可读性和性能：通过内置的 Set 方法，开发者可以直接使用 intersection()、union()、difference() 和 symmetricDifference() 等方法来操作集合，而不是编写复杂的自定义逻辑。这样不仅提高了代码的可读性，还能充分利用浏览器优化的内置方法，从而提升性能。

• Set 方法的标准化有助于跨浏览器的一致性：随着这些 Set 方法成为 Baseline 的一部分，开发者可以确信这些方法在所有主流浏览器中都有一致的支持和行为，这消除了在不同浏览器中实现这些功能的需要。

• 使用标准 Set 方法减少了技术债务：通过使用标准的 Set 方法，代码更容易维护，因为它们遵循了通用的编程模式，并且减少了自定义实现可能带来的错误和不一致。

关于本文
作者：@Adriana Jara

译者：@飘飘

原文：https://web.dev/blog/set-methods?hl=en

Node 社群

我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

“分享、点赞、在看” 支持一下