🚀学会这几个Set实例方法，助你开发体验提升一个档次⚡️

vilan_微澜
151 阅读4分钟

一、背景

在上一篇文章🌟Set集合新特性，快速实现一个商品SKU(单品)规格选择器中，使用到了下文提到的intersection()方法对每个规格的属性与已选中的属性组合的集合和单品规格集合进行取交集，交集长度和单品长度相等，则当前属性可选。当然除了对比长度，也可以通过后文提到的isSubsetOf()和isSupersetOf()方法判断是否为子集或者超集，大家可灵活运用相关方法，提升开发效率。这篇文章我们再来深入学习一下Set的新特性实例方法。

二、Set实例方法新特性

1.difference()

Set.prototype.difference()方法用来获取一个集合与另一个集合中元素的差异。假设，集合A执行该方法并接收一个集合B作为参数，那么将返回一个集合A中与集合B不同的元素的新集合。

用法示例：

const setA = new Set([1, 2, 3]);
const setB = new Set([2, 3, 4]);
const differenceFromSetBInSetA = setA.difference(setB);
const differenceFromSetAInSetB = setB.difference(setA);
console.log('setA当中与setB不同的元素:', [...differenceFromSetBInSetA]); // [1]
console.log('setB当中与setA不同的元素:', [...differenceFromSetAInSetB]); // [4]

注意： 不是两个集合之间的差异！是一个集合与另一个集合的差异！！

图示：

setA.difference(setB)如下图示，深色部分为返回的新集合：

image.png

2.symmetricDifference()

# Set.prototype.symmetricDifference()方法用来获取两个集合当中不同的元素，即去除相同元素，合并不同元素。

用法示例：

const setA = new Set([1, 2, 3]);
const setB = new Set([2, 3, 4]);
const symmetricDifference = setA.symmetricDifference(setB);
console.log('setA和setB的对称差:', [...symmetricDifference]); // [1, 4]

图示：

image.png

和上一点提到了difference()方法的不同之处在于：

symmetricDifference()是取两个集合的差异元素;

difference()是只取一个集合的差异元素。

3.union()

Set.prototype.union()方法用来对两个集合进行合并。由于Set集合的元素具有唯一性，所以会自动去除同类项，合并不同项。

用法示例

const setA = new Set([1, 2, 3]);
const setB = new Set([2, 3, 4]);
const union = setA.union(setB);
console.log('setA和setB的并集:', [...union]); // [1, 2, 3, 4]

图示：

image.png

4.intersection()

Set.prototype.intersection()方法用来获取两个集合之间相同的元素，也就是交集。假设，集合A执行该方法并接收一个集合B作为参数，那么将返回一个两个集合当中都存在的元素的新集合。

用法示例：

const setA = new Set([1, 2, 3]);
const setB = new Set([2, 3, 4]);
const intersection = setA.intersection(setB);
console.log('setA和setB的交集:', [...intersection]); // [2, 3]

图示：

image.png

5.isDisjointFrom()

Set.prototype.isDisjointFrom()方法用来判断两个集合之间是否具有相同的元素，即是否相交。

用法示例

const setA = new Set([1, 2, 3]);
const setB = new Set([2, 3, 4]);
const setC = new Set([4, 5, 6]);
const isNotCommonElementSetAAndSetB = setA.isDisjointFrom(setB);
console.log('setA和setB是否没有共同元素:', isNotCommonElementSetAAndSetB); // false
const isNotCommonElementSetAAndSetC = setA.isDisjointFrom(setC);
console.log('setA和setC是否没有共同元素:', isNotCommonElementSetAAndSetC); // true

6.isSubsetOf()

Set.prototype.isSubsetOf()方法用来判断一个集合的元素是否全部包含在另一个集合当中。假设，集合A执行该方法并接收一个集合B作为参数，如果集合A中的全部元素都存在于集合B当中，那么可以认为集合A是集合B的子集而集合B则是集合A的超集(下一个方法会讲)。

用法示例

const setA = new Set([1, 2, 3]);
const setB = new Set([1, 2, 3, 4, 5]);
console.log('setA是否是setB的子集:', setA.isSubsetOf(setB)); // true
console.log('setB是否是setA的子集:', setB.isSubsetOf(setA)); // false

图示：

image.png

7.isSupersetOf()

Set.prototype.isSupersetOf()方法和上面提到的Set.prototype.isSubsetOf()方法是相对的，该方法也是用来判断一个集合的元素是否都包含在另一个集合当中。假设，集合B执行该方法并接收一个集合A作为参数，如果集合A中的全部元素都存在于集合B当中，那么可以认为集合B是集合A的超集。

用法示例

const setA = new Set([1, 2, 3]);
const setB = new Set([1, 2, 3, 4, 5]);
const setC = new Set([1, 2, 3, 4, 5]);
console.log('setA是否是setB的超集:', setA.isSupersetOf(setB)); // false
console.log('setB是否是setA的超集:', setB.isSupersetOf(setA)); // true
console.log('setB是否是setC的超集:', setB.isSupersetOf(setC)); // true
console.log('setC是否是setB的超集:', setC.isSupersetOf(setB)); // true

图示：

image.png

三、结语

在平时开发中灵活运行这些新特性，或许可以给我们带来不错的开发体验⚡️⚡️⚡️。

avatar
文章
阅读
粉丝