🚀学会这几个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

图示:

三、结语

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

相关推荐
像是套了虚弱散1 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan1 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇2 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15883 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追3 小时前
Vue组件化开发
前端·html
艾德金的溪4 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长4 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH4 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴4 小时前
Android Studio新手开发第二十六天
android·前端·android studio
JH30734 小时前
B/S架构、HTTP协议与Web服务器详解
前端·http·架构