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

一、背景

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

二、Set实例方法新特性

1.difference()

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

用法示例:

js 复制代码
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)如下图示,深色部分为返回的新集合:

2.symmetricDifference()

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

用法示例:

js 复制代码
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]

图示:

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

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

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

3.union()

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

用法示例

js 复制代码
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]

图示:

4.intersection()

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

用法示例:

js 复制代码
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]

图示:

5.isDisjointFrom()

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

用法示例

js 复制代码
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的超集(下一个方法会讲)

用法示例

js 复制代码
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

图示:

7.isSupersetOf()

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

用法示例

js 复制代码
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

图示:

三、结语

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

相关推荐
IT_陈寒1 天前
SpringBoot实战:这5个隐藏技巧让我开发效率提升200%,90%的人都不知道!
前端·人工智能·后端
ObjectX前端实验室1 天前
【图形编辑器架构】节点树与渲染树的双向绑定原理
前端·计算机图形学·图形学
excel1 天前
Vue2 与 Vue3 生命周期详解与对比
前端
一只猪皮怪51 天前
React 18 前端最佳实践技术栈清单(2025版)
前端·react.js·前端框架
Misnice1 天前
React渲染超大的字符串
前端·javascript·react.js
天天向上的鹿茸1 天前
用矩阵实现元素绕不定点旋转
前端·线性代数·矩阵
李鸿耀1 天前
主题换肤指南:设计到开发的完整实践
前端
带娃的IT创业者1 天前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
二十雨辰1 天前
vite如何处理项目中的资源
开发语言·javascript
非凡ghost1 天前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求