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

相关推荐
Lee川几秒前
深入浅出:用 React 打造高性能懒加载无限滚动组件
前端·react.js
牛奶14 分钟前
开发者的"奇技淫巧":那些让你效率翻倍的实战技巧
前端·后端·程序员
咸鱼翻身更入味14 分钟前
Vue创建一个简单的Agent聊天——工具调用
前端
Timo来了14 分钟前
indexDB的用法示例
前端
walking95718 分钟前
重新学习前端之设计模式与架构
前端·javascript·面试
walking95720 分钟前
重新学习前端之TypeScript
前端·javascript·面试
walking95721 分钟前
重新学习前端之Linux
前端·vue.js·面试
walking95721 分钟前
重新学习前端之CSS
前端·vue.js·面试
walking95721 分钟前
重新学习前端之Git
前端·vue.js·面试
walking95722 分钟前
重新学习前端之小程序
前端