你还在用for循环遍历集合?试试JavaScript新增的7种方法吧!

集合操作方法的介绍

JavaScript的Set对象自从ES6引入以来,主要用于确保列表中没有重复的元素。然而,随着即将推出的7种内置Set方法,我们可能会发现自己更频繁地使用它们。

注意:这些新功能并不是所有浏览器都支持。

union()

新的 Set union() 方法为我们提供了两个集合中所有的唯一项。

js 复制代码
const creation = new Set(['coding','writing','painting']);

const joy = new Set(['crying','laughing','coding']);

console.log(creation.union(joy));
// Set {'coding','crying','writing','laughing','painting'}

由于它是不可变的并且返回一个对象副本,你可以无限地调用

js 复制代码
const odd = new Set([21,23,25]);

const even = new Set([20,22,24]);

const prime = new Set([23,29]);

console.log(odd.union(even).union(prime));
// Set(7) {21,23,25,20, 22,24,29}  

intersection()

两个集合都存在的元素是什么?

js 复制代码
const mobile = new Set(['javascript','java','swift','dart']);

const backend = new Set(['php','python','javascript','java']);
const frontend = new Set(['javascript','dart']);

console.log(mobile.intersection(backend));
// Set {javascript,java}

console.log(mobile.intersection(backend).intersection(frontend));
// Set {javascript}

difference()

difference()方法执行 A-B 操作,返回集合A中不在集合B中的所有元素:

js 复制代码
const joy = new Set(['crying','laughing','coding']);

const pain = new Set(['crying','screaming','coding']);

console.log(joy.difference(pain));
// Set {'laughing'}

symmetricDifference()

这个方法双向获取集合差异,即(A-B)U(B-A)。返回只在集合A或集合B中的元素:

js 复制代码
const joy = new Set(['crying','laughing','coding']);

const pain = new Set(['crying','screaming','coding']);

console.log(joy.symmetricDifference(pain));
// Set {'laughing','screaming'}

isSubsetOf()

检查一个集合的所有元素是否都在另一个集合中。

js 复制代码
const colors = new Set(['indigo','teal','cyan','violet']);

const purpleish = new Set(['indigo','violet']);

const secondary = new Set(['orange','green','violet']);

console.log(purpleish.isSubsetOf(colors)); // true

console.log(secondary.isSubsetOf(colors)); // false

console.log(colors.isSubsetOf(colors)); // true

isSupersetOf()

检查一个集合是否包含另一个集合中的所有元素

js 复制代码
const colors = new Set(['salmon','cyan','yellow','aqua']);

const blueish = new Set(['cyan','aqua']);

const primary = new Set(['red','yellow','blue']);

console.log(colors.isSupersetOf(blueish)); // true

console.log(colors.isSupersetOf(primary)); // false

console.log(colors.isSupersetOf(colors)); // true

isDisjointFrom()

这两个集合是否没有任何共同的元素

js 复制代码
const ai = new Set(['python','c++']);

const mobile = new Set(['java','is','dart','kotlin']);

const frontend = new Set(['js','dart']);

console.log(ai.isDisjointFrom(mobile)); // true

console.log(mobile.isDisjointFrom(frontend)); // false

如何立即使用它们

通过使用 core-js polyfills:

否则,你会从TypeScript 和 Node.js收到错误提示 ---它们尚未成为官方JavaScript标准的一部分。

总结

这就是我们的7种新的Set方法 ---再也不需要像 _.intersction() (Lodash!)这样的第三方库了。

翻译自 medium.com/coding-beau...

相关推荐
大橙子额15 分钟前
【解决报错】Cannot assign to read only property ‘exports‘ of object ‘#<Object>‘
前端·javascript·vue.js
WooaiJava1 小时前
AI 智能助手项目面试技术要点总结(前端部分)
javascript·大模型·html5
爱喝白开水a2 小时前
前端AI自动化测试:brower-use调研让大模型帮你做网页交互与测试
前端·人工智能·大模型·prompt·交互·agent·rag
Never_Satisfied2 小时前
在JavaScript / HTML中,关于querySelectorAll方法
开发语言·javascript·html
董世昌412 小时前
深度解析ES6 Set与Map:相同点、核心差异及实战选型
前端·javascript·es6
WeiXiao_Hyy3 小时前
成为 Top 1% 的工程师
java·开发语言·javascript·经验分享·后端
吃杠碰小鸡3 小时前
高中数学-数列-导数证明
前端·数学·算法
kingwebo'sZone3 小时前
C#使用Aspose.Words把 word转成图片
前端·c#·word
xjt_09013 小时前
基于 Vue 3 构建企业级 Web Components 组件库
前端·javascript·vue.js
我是伪码农3 小时前
Vue 2.3
前端·javascript·vue.js