写点什么

所有主流浏览器都支持新的 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:008920

评论 1 条评论

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

技术分享 | 专项测试技术初识Hook

霍格沃兹测试开发学社

入门机器学习?还是先抢救一下数学吧!

博文视点Broadview

兆骑科创创新创业服务平台,海内外高层次人才引进,赛事承办

兆骑科创凤阁

如何应对ITSM难题,打造现代化、高效的ITSM解决方案?

龙智—DevSecOps解决方案

ITSM ITSM软件 ITSM解决方案

技术分享 | 这些常用测试平台,你们公司在用的是哪些呢?

霍格沃兹测试开发学社

快速上手Elasticsearch bboss restclient

大河

elasticsearch bboss restclient

2022 世界人工智能大会|人工智能与开源技术先锋论坛即将开幕

Kyligence

开源技术 人工智能大会

bboss数据同步ETL工具介绍

大河

elasticsearch ETL bboss

bboss http负载均衡器使用指南

大河

HTTP bboss httpproxy

技术分享 | 测试平台开发-前端开发之数据展示与分析

霍格沃兹测试开发学社

Kyligence 亮相 Gartner 2022 数据与分析峰会,解锁数据智能新潜力

Kyligence

数据管理 指标中台

移动端App自动化之触屏操作自动化

霍格沃兹测试开发学社

厚积薄发--一文带您了解阿里云 RocketMQ 轻量版消息队列(MNS)

阿里巴巴云原生

阿里云 RocketMQ 云原生 消息队列

Http/Https插件使用指南

大河

https HTTP Data ETL bboss

技术分享 | 想测试入门就必须要懂的软件开发流程

霍格沃兹测试开发学社

兆骑科创人才引进服务平台,线上直播路演,投融资对接

兆骑科创凤阁

技术分享 | 这些常用测试平台,你们公司在用的是哪些呢?

霍格沃兹测试开发学社

校区多,客情管理难?看中进教育使用明道云的新解法

明道云

蓝牙5.0简介、nRF52832 BLE样例工程框架及main函数初始化流程简析

矜辰所致

蓝牙 启动流程 8月月更 nRF52832

GOPS现场 | 对话龙智董事长何明,探讨DevOps安全新概念

龙智—DevSecOps解决方案

运维 GOPS大会 GOPS全球运维大会

AntDB最新成果亮相全球分布式云大会,推动企业数字化变革深入

亚信AntDB数据库

AntDB

BulkProcessor异步批处理组件使用

大河

elasticsearch bboss bulkprocess

网络组件axios可以在OpenHarmony上使用了

OpenHarmony开发者

Open Harmony

最常见的两个Jenkins问题,以及解决方法

龙智—DevSecOps解决方案

ci CI/CD CI/CD管道

如何建立开源战略

龙智—DevSecOps解决方案

开源 漏洞修复 漏洞检测 漏洞管理

技术分享 | 测试人员必须掌握的测试用例

霍格沃兹测试开发学社

这份SVN命令备忘清单,请查收

龙智—DevSecOps解决方案

svn 版本控制系统

字节跳动基于 ClickHouse 优化实践之“查询优化器”

字节跳动数据平台

OLAP Clickhouse 查询优化 数据库开发 数据引擎

NFT平台开发:NFT数字馆藏平台开发

开源直播系统源码

数字藏品软件开发 数字藏品开发 数字藏品系统

Elasticsearch添加修改删除索引文档

大河

elasticsearch bboss

节能环保LED显示屏为什么是未来发展趋势?

Dylan

LED显示屏 led显示屏厂家

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