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

相关推荐
默_笙5 分钟前
🍔 中间件不只是打日志:四个钩子、一次短路,和自带的工具
前端·javascript
程序员老赵1 小时前
Docker 部署 Dolibarr:轻松搭建开源 ERP/CRM 平台
运维·前端·后端
星禾元亨1 小时前
同一件事有三份资料,AI 该信哪一份?冲突判定、优先级链与处置流程
前端·人工智能
Dovis(誓平步青云)1 小时前
家里设备越来越多,如何用一张空间地图控制灯光和温度![
android·java·前端·javascript·人工智能·电脑
穆梓兰煊1 小时前
TS5.7 vs 裸JS:AI应用少3坑
前端
榆瓷1 小时前
闲着没事,我把 WebGPU 的样板代码封成了一个库
前端
136096757231 小时前
页面打不开不是 Nginx 的错
前端·后端
xieter1 小时前
【技术精选】TypeScript 高级类型体操:条件类型与模板字面量深度剖析 (2026-10-06)
javascript
ss2732 小时前
AI全栈实战 | 3.3-02 Python 并发:有 GIL 为什么还用多线程,asyncio 和 JS 事件循环同源不同味
开发语言·javascript·python
liangshanbo12152 小时前
高级前端面试题:package.json 常见字段
前端·json