写点什么

所有主流浏览器都支持新的 JavaScript 集合方法

作者:Agazi Mekonnen

  • 2024-08-29
    北京
  • 本文字数:1809 字

    阅读完需:约 6 分钟

大小:454.40K时长:02:35
所有主流浏览器都支持新的JavaScript集合方法

随着 Firefox 127 的发布,现在所有主流浏览器引擎都全面支持新的JavaScript集合方法,包括 intersection()、union()、difference()、symmetricDifference()、isSubsetOf()、isSupersetOf()和 isDisjointFrom()。这意味着开发者们不再需要依赖 polyfill 来确保这些方法在不同环境中的兼容性。这些新加入的特性提供了一套便捷的内置工具来操作和比较集合,不仅简化了开发,还提升了程序的性能。


JavaScript 中的 Set 与 Array 类似,但它可以确保集合中的每个元素都是唯一的。这种自动除重的特性使得 Set 成为创建唯一元素集合的理想选择。下面是一个简单的例子,展示了如何创建一个 Set 并向其添加元素:


const users = new Set();
const alice = { id: 1, name: "Alice" };
users.add(alice);
users.forEach(user => { console.log(user) });
复制代码


在检查元素是否存在时, Set 通常比 Array 更加高效,这一特性使得它对于性能要求较高的应用程序来说非常有价值。


union()方法返回一个新 Set,包含原始 Set 和给定 Set 中的元素。这个方法在合并集合时极为有用,同时确保结果集中不包含重复项:


const set1 = new Set(["Alice", "Bob", "Charlie"]);
const set2 = new Set(["Bob", "Charlie", "David"]);
const unionSet = set1.union(set2);
unionSet.forEach(name => {
  console.log(name); // 输出: Alice, Bob, Charlie, David
});
复制代码


intersection()方法返回一个新 Set,只包含两个 Set 共有的元素。这个方法在识别两个集合共同元素时非常有用:


const intersectionSet = set1.intersection(set2);
intersectionSet.forEach(name => {
  console.log(name); // 输出: Bob, Charlie
});
复制代码


symmetricDifference()方法返回一个新 Set,包含只在其中一个 Set 中出现的元素,不包含两个 Set 共有的元素。这个方法在识别两个集合各自的不同元素时非常有用:


const symmetricDifferenceSet = set1.symmetricDifference(set2);
symmetricDifferenceSet.forEach(name => {
  console.log(name); // 输出: Alice, David
});
复制代码


difference()方法返回一个新 Set,包含了原始 Set 中有而给定 Set 中没有的元素。这在需要从集合中排除某些元素时非常有用:


const set1Only = set1.difference(set2);
set1Only.forEach(name => {
  console.log(name); // 输出: Alice
});
复制代码


isSubsetOf()和 isSupersetOf()方法根据两个 Set 之间的包含关系返回一个布尔值。isSubsetOf()方法检查一个 Set 的所有元素是否都包含在另一个 Set 中,而 isSupersetOf()方法检查一个 Set 是否包含了另一个 Set 的所有元素。

const subset = new Set(["Alice", "Bob"]);
const superset = new Set(["Alice", "Bob", "Charlie"]);
if (subset.isSubsetOf(superset)) {
  console.log("subset is a subset of superset"); // 这将被打印出来,因为subset的所有元素也都在superset中。
} else {
  console.log("subset is not a subset of superset");
}
if (superset.isSupersetOf(subset)) {
  console.log("superset is a superset of subset"); // 这将被打印出来,因为subset中的所有元素也都在superset中。
} else {
  console.log("superset is not a superset of subset");
}
复制代码


isDisjointFrom()方法检查两个 Set 是否有共同元素:

const set3 = new Set(["Eve", "Frank", "Gina"]);
if (set1.isDisjointFrom(set2)) { console.log("Set1 and Set2 are disjoint"); // 这将被打印出来,因为集合set1和集合set2没有共同元素} else { console.log("Set1 and Set2 are not disjoint");}
if (set1.isDisjointFrom(set3)) { console.log("Set1 and Set3 are disjoint");} else { console.log("Set1 and Set3 are not disjoint"); // 这将被打印出来,因为集合set1和集合set3有一个共同的元素“Charlie”
复制代码

社区对这些新方法反响热烈。在Reddit的一个讨论帖中,用户 peterlinddk 表示:


“太好了,我们终于可以用 Set 做更多的事情,不仅仅是‘重复项检测器’。我还希望有一种方法,允许对象在不必是完全相同的实例的情况下也能被认为是‘相等’的,有点像 Java 的.equals 和.hashCode 方法。”


另一位用户 Pelopida92 对这些新方法在性能上带来的提升表示赞赏,并表示:


“Set 太棒了。我在一些处理大数据量的脚本中广泛使用了这些 Set 方法,因为它们不仅在性能上优于数组,使用起来也非常简便和直观。”


原文链接

https://www.infoq.com/news/2024/07/javascript-set-methods/

2024-08-29 08:008765

评论 1 条评论

发布
用户头像
Chrome 是支持 ECMAScript 6 (ES6) 及更高版本的 JavaScript 标准的主要浏览器之一。这意味着开发者可以使用最新的 JavaScript 功能,如箭头函数、模块化、Promise、async/await 等,来编写更简洁、更现代的代码。
2024-09-02 15:22 · 福建
回复
没有更多了
发现更多内容

阿里云弹性计算资深技术专家徐海弘:云上自动化运维成熟度模型

云布道师

弹性计算

大模型打开了一层技术天花板,催生新场景变革老场景

中关村科金

人工智能 企业服务 大模型 对话式AI

博睿学院 | 本周四:ETL技术在数据标准化中的应用实践

博睿数据

ETL 智能运维 博睿数据 博睿学院

Birdwatcher 进阶使用指南

Zilliz

Milvus 向量数据库 birdwatcher

MobTech 秒验|本机号码一键登录会泄露隐私吗

MobTech袤博科技

聚焦用户精细化运营场景,极客邦科技与火山引擎数智平台达成合作

字节跳动数据平台

用户增长 数字化 用户运营 数字化案例 企业号 4 月 PK 榜

ZRTC高并发策略在专属音视频中台场景的应用

中关村科金

RTC 中关村科金 音视频中台 高并发策略 对话式AI

低代码有哪些缺点?4千字深入解析

优秀

低代码 低代码缺点

使用验证码拦截爬虫和机器人实践分享

宙哈哈

php html 爬虫 机器人

基于二代征信报告的信用评估模型实践

中关村科金

金融 征信 风控 对话式AI

揭秘 Milvus 助力平台建设的终极奥义

Zilliz

Meetup Milvus 向量数据库

如何在 Web 实现支持虚拟背景的视频会议

声网

Web 视频会议 RTE 虚拟背景

传输体积下降 85%,融云 HTTP 压缩算法解析

融云 RongCloud

算法 音视频 传输 融云 通讯

从零学习SDK(1)什么是SDK,为什么要使用它

MobTech袤博科技

「刷起来」Go必看的进阶面试题详解

王中阳Go

golang 高效工作 学习方法 面试题 Go 语言

尚硅谷新版Git视频教程发布

小谷哥

MIAOYUN与OpenCloudOS、TencentOS Server 3完成产品兼容互认证

MIAOYUN

容器云 云平台 产品兼容性互认 互认证 兼容性互认证

浙江宁波|2023年度宁波市甬江引才工程

科兴未来News

Flink Table Store 独立孵化启动 , Apache Paimon 诞生

Openlab_cosmoplat

大数据 开源

[验证码] KgCaptcha风险监测方法

宙哈哈

php html

MobPush推送查询API

MobTech袤博科技

CodeGeeX 130亿参数大模型的调优笔记:比FasterTransformer更快的解决方案

Openlab_cosmoplat

Python 开源社区

软件测试/测试开发丨实战演练基于加密接口测试测试用例设计

测试人

软件测试 自动化测试 测试开发

flutter系列之:在flutter中使用相机拍摄照片

程序那些事

flutter 架构 大前端 程序那些事

8个可以免费下载3D模型的网站,快收藏起来吧~

Finovy Cloud

3D软件 3ds Max

流媒体数字版权应用实践

Marvin Ma

数字版权 流媒体

浙江宁波|2023年上半年宁波市镇海区高层次人才项目政策申报

科兴未来News

跨越AI大门,一本翻译蓝皮书、一场人机共译比赛投射出怎样的未来?

脑极体

百度 AI 翻译

DataLeap数据资产实战:如何实现存储优化?

字节跳动数据平台

MySQL 数据库 大数据 数据治理 数据存储

量化交易场景下日增 144 万条数据,使用 MySQL 和 TDengine 分别如何建模?

TDengine

大数据 tdengine 物联网 时序数据库

字节跳动CVPR 2023论文精选来啦(内含一批图像生成新研究)

字节跳动技术范儿

字节跳动 算法 计算机视觉 CVPR AIGC

所有主流浏览器都支持新的JavaScript集合方法_大前端_InfoQ精选文章