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

图示:

三、结语

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

相关推荐
上单带刀不带妹7 分钟前
ES6 中的 Proxy 全面讲解
前端·ecmascript·es6·proxy
11054654011 小时前
37、需求预测与库存优化 (快消品) - /供应链管理组件/fmcg-inventory-optimization
前端·信息可视化·数据分析·js
nunumaymax1 小时前
在图片没有加载完成时设置默认图片
前端
OEC小胖胖2 小时前
【React 设计模式】受控与非受控:解构 React 组件设计的核心模式
前端·react.js·设计模式·前端框架·web
你怎么知道我是队长2 小时前
C语言---编译的最小单位---令牌(Token)
java·c语言·前端
一枚前端小能手3 小时前
🔥 Vue状态管理越写越乱,Pinia拯救了我
前端
cloudcruiser3 小时前
Apache HTTP Server:深入探索Web世界的磐石基石!!!
前端·其他·http·apache
一个专注api接口开发的小白3 小时前
手把手教程:使用 Postman 测试与调试淘宝商品详情 API
前端·数据挖掘·api
芜青4 小时前
JavaScript手录18-ajax:异步请求与项目上线部署
开发语言·javascript·ajax
织_网4 小时前
Electron 核心 API 全解析:从基础到实战场景
前端·javascript·electron