你还在用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...

相关推荐
翻滚吧键盘29 分钟前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹35 分钟前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志37 分钟前
typescript结构化类型应用两例
javascript
杨进军1 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW1 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字1 小时前
Kotlin lazy 委托的底层实现原理
前端
gnip2 小时前
总结一期正则表达式
javascript·正则表达式
爱分享的程序员2 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘2 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出2 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架