JS集合中的并集、交集、差集

关注下方公众号，获取更多热点资讯

JavaScript在 ES2015 规范中被引入到该语言中Set，但它似乎一直不完整。这种情况即将改变。

集合是值的集合，其中每个值只能出现一次。在的 ES2015 版本中Set，可用功能围绕创建、添加、删除和检查Set. 如果您想对多个集合进行操作或比较，则必须编写自己的函数。值得庆幸的是，TC39（为制定 ECMAScript 规范而成立的委员会）和浏览器一直在致力于此。我们现在在 JavaScript 实现中看到了union、intersection和等函数difference。

在了解新功能之前，让我们回顾一下 JavaScript Sets 现在可以做什么，然后我们将在下面介绍新的 Set 函数以及支持它们的 JavaScript 引擎。

ES2015 JavaScript 集有什么作用？

我们来看看 ES2015 版本的 JavaScriptSet能做什么。通过一些例子最容易做到这一点。

您可以构造一个Set不带任何参数的 a ，这会给您一个空的Set. 或者，您可以提供一个可迭代对象（如数组）来初始化Set.

const languages = new Set(["JavaScript", "TypeScript", "HTML", "JavaScript"]);

Sets 只能包含唯一值，因此Set上面有三个成员。您可以向访问size属性核实这一点。

languages.size;

// => 3

Set您可以使用addfunction添加更多元素。添加已经存在的元素Set不会执行任何操作。

languages.add("JavaScript");

languages.add("CSS");

languages.size;

// => 4

您可以从Setwith中删除元素delete。

languages.delete("TypeScript");

languages.size;

// => 3

Set您可以使用函数has检查某个元素是否是的成员。a 的好处之一是该检查可以在常数时间内 ( O(1)Set )完成，而检查元素是否在 an 中的时间因( O(n) )的长度而异。使用s 来完成这样的任务是一种编写有意的高效代码的干净方法。ArrayArraySet

languages.has("JavaScript");

// => true

languages.has("TypeScript");

// => false

您可以使用or循环遍历 aSet的元素forEachfor…of。元素按照添加到的顺序排序Set。

languages.forEach(element => console.log(element));

// "JavaScript"

// "HTML"

// "CSS"

您还可以通过Set使用keys和values函数（实际上是等效的）以及该entries函数来获取迭代器。最后，您可以使用该clear函数清空 Set。

languages.clear();

languages.size;

// => 0

新的 Set 功能有哪些？

方法Set提案将以下方法添加到Set实例中：union、intersection、difference、symmetricDifference、isSubsetOf、isSupersetOf和isDisjointFrom。

其中一些方法类似于一些 SQL 连接，我们将用它们来说明代码和结果。让我们看看每个函数的作用的一些示例。

您可以在 Chrome 122+ 或 Safari 17+ 中尝试下面的任何代码示例。

Set.prototype.union(其他)

集合的并集是包含任一集合中存在的所有元素的集合。

const frontEndLanguages = new Set(["JavaScript", "HTML", "CSS"]);

const backEndLanguages = new Set(["Python", "Java", "JavaScript"]);

const allLanguages = frontEndLanguages.union(backEndLanguages);

// => Set {"JavaScript", "HTML", "CSS", "Python", "Java"}

在此示例中，前两组中的所有语言都在第三组中。与向中添加元素的其他方法一样Set，重复项将被删除。

这相当于FULL OUTER JOIN两个表之间的 SQL。

Set.prototype.intersection(其他)

交集是包含两个集合中存在的所有元素的集合。

const frontEndLanguages = new Set(["JavaScript", "HTML", "CSS"]);

const backEndLanguages = new Set(["Python", "Java", "JavaScript"]);

const frontAndBackEnd = frontEndLanguages.intersection(backEndLanguages);

// => Set {"JavaScript"}

“JavaScript”是这里两个集合中唯一存在的元素。

Set.prototype.difference(其他)

const frontEndLanguages = new Set(["JavaScript", "HTML", "CSS"]);

const backEndLanguages = new Set(["Python", "Java", "JavaScript"]);

const onlyFrontEnd = frontEndLanguages.difference(backEndLanguages);

// => Set {"HTML", "CSS"} 

const onlyBackEnd = backEndLanguages.difference(frontEndLanguages);

// => Set {"Python", "Java"}

在查找集合之间的差异时，重要的是您在哪个集合上调用函数以及哪个集合是参数。在上面的示例中，从前端语言中删除后端语言会导致“JavaScript”被删除并在结果集中返回“HTML”和“CSS”。然而，从后端语言中删除前端语言仍然会导致“JavaScript”被删除，并返回“Python”和“Java”。

差异就像执行LEFT JOIN.

交叉点就像一个INNER JOIN.

Set.prototype.symmetryDifference(其他)

两个集合之间的对称差异是一个集合，该集合包含两个集合之一中的所有元素，但不包含两个集合中的所有元素。

const frontEndLanguages = new Set(["JavaScript", "HTML", "CSS"]);

const backEndLanguages = new Set(["Python", "Java", "JavaScript"]);

const onlyFrontEnd = frontEndLanguages.symmetricDifference(backEndLanguages);

// => Set {"HTML", "CSS", "Python", "Java"} 

const onlyBackEnd = backEndLanguages.symmetricDifference(frontEndLanguages);

// => Set {"Python", "Java", "HTML", "CSS"}

在这种情况下，结果集中的元素是相同的，但请注意顺序不同。集合顺序由元素添加到集合的顺序决定，并且执行该函数的集合将首先添加其元素。

对称差异类似于 FULL OUTER JOIN，排除两个表中的任何元素。

Set.prototype.isSubsetOf(其他)

如果第一个集合中的所有元素都出现在第二个集合中，则一个集合是另一个集合的子集。

const frontEndLanguages = new Set(["JavaScript", "HTML", "CSS"]);

const declarativeLanguages = new Set(["HTML", "CSS"]);

declarativeLanguages.isSubsetOf(frontEndLanguages);

// => true

frontEndLanguages.isSubsetOf(declarativeLanguages);

// => false

集合也是其自身的子集。

frontEndLanguages.isSubsetOf(frontEndLanguages);

// => true

Set.prototype.isSupersetOf(其他)

如果第二个集合中的所有元素都出现在第一个集合中，则一个集合是另一个集合的超集。这是子集的相反关系。

const frontEndLanguages = new Set(["JavaScript", "HTML", "CSS"]);

const declarativeLanguages = new Set(["HTML", "CSS"]);

declarativeLanguages.isSupersetOf(frontEndLanguages);

// => false

frontEndLanguages.isSupersetOf(declarativeLanguages);

// => true

集合也是其自身的超集。

frontEndLanguages.isSupersetOf(frontEndLanguages);

// => true

Set.prototype.isDisjointFrom(其他)

const frontEndLanguages = new Set(["JavaScript", "HTML", "CSS"]);

const interpretedLanguages = new Set(["JavaScript", "Ruby", "Python"]);

const compiledLanguages = new Set(["Java", "C++", "TypeScript"]);

interpretedLanguages.isDisjointFrom(compiledLanguages);

// => true

frontEndLanguages.isDisjointFrom(interpretedLanguages);

// => false