IT博客汇 | JS Set新支持了intersection, union, difference等方法

JS Set新支持了intersection, union, difference等方法

张鑫旭发表于 2025-02-10 13:46:12

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11522
本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。

继续介绍前端前沿新特性，今天讲的是Set或者类似Set的数据新支持的若干方法，主要是交集、合集以及差异判定相关，API较多，一个一个来。

一、intersection交集

单词’intersection’就是交叉，交集的意思。

用数学公式表示就是：

$A\cap B = \{x\in A\mid x\in B\}$

用更直观的图形表示则为：

交集图形示意

应用举例

已知数组A和数组B，请返回两个数组相同的数组项。

在过去，是需要对两个数组分别循环处理，现在就是一行代码的事情，参考实现：

const arr1 = ['CSS世界', 'CSS新世界', 'HTML并不简单'];
const arr2 = ['CSS选择器世界', 'CSS新世界'];
// 相同数组项
console.log([...new Set(arr1).intersection(new Set(arr2))]);
// 返回结果是：
// ['CSS新世界']

例如，在Chrome console控制台的运行结果截图：

数组合并运行结果示意

二、union合集

union()方法可以让Set或者类Set对象的值进行合并（同时去重）处理。

语法示意：

set1.union(set2)

数学公式表示：

$A\cup B = \{x\midx\in A\text{ or }x\in B\}$

图形表示：

合集效果图形示意

案例示意

const arr1 = ['CSS世界', 'CSS新世界', 'HTML并不简单'];
const arr2 = ['CSS选择器世界', 'CSS新世界'];
// 合并去重
console.log([...new Set(arr1).union(new Set(arr2))]);
// 返回结果是：
// ['CSS世界', 'CSS新世界', 'HTML并不简单', 'CSS选择器世界']

下图所示的就是运行结果：

数组合并去重

三、difference和symmetricDifference差集

Set.prototype.difference()返回的是另外一个Set对象和自身不同的部分。

用MathML数学表达式示意：

$A\setminus B = \{x\in A\mid x\notin B\}$

还是下面的圆形图像更直观：

Set差集示意

Example – 案例

const arr1 = ['CSS世界', 'CSS新世界', 'HTML并不简单'];
const arr2 = ['CSS选择器世界', 'CSS新世界'];
// 返回不一样的部分
console.log([...new Set(arr1).difference(new Set(arr2))]);
// 返回结果是：
// ['CSS世界', 'HTML并不简单']

随意打开一个页面的console输入框，粘贴回车测试下，果然是这个输出内容：

difference案例运行结果

注意，返回的是调用对象的差值，而不是所有对象不同的部分。

如果想要取所有对象的差值部分，请使用symmetricDifference()方法。

symmetricDifference对称差集

公式和图示：

$A\ominus B = (A\setminus B)\cup(B\setminus A)$

对称差集示意

例如：

const arr1 = ['CSS世界', 'CSS新世界', 'HTML并不简单'];
const arr2 = ['CSS选择器世界', 'CSS新世界'];
// 返回不一样的部分
console.log([...new Set(arr1).symmetricDifference(new Set(arr2))]);
// 返回结果是：
// ['CSS世界', 'HTML并不简单', 'CSS选择器世界']

四、isDisjointFrom()是否无重合

Set对象还支持了三个逻辑判断的方法。

首先是isDisjointFrom()方法，用来判断Set集是不是没有任何重合，也就是是不是没有交集，单词disjoint的意思就是“不相交；相离；”。

用数学符号表示：

$A\text{ is disjoint from }B \Leftrightarrow A\cap B = \empty$

使用维恩图表示：

不相交示意

举个例子

下面arr1和arr2都有相同的数组项'CSS新世界'，因此，最后输出的值就是false，是有相同的值，彼此是有相交的。

const arr1 = ['CSS世界', 'CSS新世界', 'HTML并不简单'];
const arr2 = ['CSS选择器世界', 'CSS新世界'];
// 是否彼此独立
console.log(new Set(arr1).isDisjointFrom(new Set(arr2)));
// 返回结果是：false

但如果将数组arr1里面的数组项'CSS新世界'去掉，那么返回的就会使true，两个数组没有任何项目是重复的。

const arr1 = ['CSS世界', 'HTML并不简单'];
const arr2 = ['CSS选择器世界', 'CSS新世界'];
// 是否彼此独立
console.log(new Set(arr1).isDisjointFrom(new Set(arr2)));
// 返回结果是：true

五、isSubsetOf()是否被包含

语法：

setA.isSubsetOf(setB)

表示setA是否被setB包含。

用专门的数学符号公式表示：

$A\subseteq B \Leftrightarrow \forall x\in A,\,x\in B$

用逻辑关系图表示：

被包含关系示意

案例演示

包含于被包含还是很好理解的，就是是不是所有A的值都在B里面。

下面是MDN上的例子，请看：

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

const primes = new Set([2, 3, 5, 7, 11, 13, 17, 19]);
const odds = new Set([3, 5, 7, 9, 11, 13, 15, 17, 19]);
console.log(primes.isSubsetOf(odds)); // false

如果两个数组是一样的，那么如果谁包含谁，都可以认为是true，比方说：

const set1 = new Set([1, 2, 3]);
const set2 = new Set([1, 2, 3]);
console.log(set1.isSubsetOf(set2)); // true
console.log(set2.isSubsetOf(set1)); // true