写点什么

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

评论 1 条评论

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

Dubbo-go Server端开启服务过程

apache/dubbo-go

dubbo dubbo-go dubbogo

英特尔首批独显笔记本亮相,非凡S3x纵享轻薄新体验

E科讯

线上Java程序占用 CPU 过高,请说一下排查方法?

古时的风筝

Java JVM cpu 100%

Week 5命题作业

balsamspear

极客大学架构师训练营

Week 5学习总结

balsamspear

极客大学架构师训练营

响应式编程简介之:Reactor

程序那些事

响应式编程 reactor Reactive 程序那些事 响应式系统

英特尔进军独显领域,第一批搭载锐炬®Xe MAX独显轻薄本已问世!

E科讯

互联网审判中区块链存证技术的应用进路

CECBC

互联网 电子存证

Week 7 命题作业

阿泰

性能测试,简单的压测工具

garlic

极客大学架构师训练营

训练营第三周作业

大脸猫

极客大学架构师训练营

书写高质量SQL的30条建议

诸葛小猿

MySQL SQL优化

darknet A版安装

Dreamer

DDIA 读书笔记(5)数据分区方案

莫黎

读书笔记

【性能优化】纳尼?内存又溢出了?!是时候总结一波了!!

冰河

性能优化 内存泄露 高并发 高性能 内存溢出

搭载设计师级独显英特尔Xe MAX,非凡S3x体验全能创作

E科讯

诈骗?通证项目方的危局

CECBC

区块链 法律

25个小众的Java库

GuoYaxiang

Java 开发工具

Android 一行代码接入 扫码 生成码

Java android kotlin zxing camera

天源迪科受邀出席“第四届央企电商化采购发展高峰论坛"

DT极客

手动造轮子——为Ocelot集成Nacos注册中心

yi念之间

nacos ASP.NET Core Ocelot

全球首批搭载英特尔Xe MAX独显惊艳上市,非凡S3x尽显创作魅力

E科讯

JVM真香系列:.java文件到.class文件

田维常

JVM

http请求中get和post方法的区别

测试人生路

HTTP post GET

【Knative系列】一文读懂 Knative Serving扩缩容的原理

公众号:云原生Serverless

Serverless knative autoscaler kantive

手动造轮子——基于.NetCore的RPC框架DotNetCoreRpc

yi念之间

RPC ASP.NET Core

Flink 1.11 与 Hive 批流一体数仓实践

Apache Flink

flink 流计算 实时计算

阿里P8对Thread核心源码讲解

Java架构师迁哥

蚂蚁金融推迟上市:互联网金融是否要遭遇滑铁卢

石头IT视角

“十三五”收官,区块链赋能能源电力路在何方?

CECBC

区块链 电力 能源

ViewportFrame demo

katichar

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