ECMAScript 2021(ES12)新功能

2025-05-27

ECMAScript 2021(ES12)新功能

ECMAScript,JavaScript 的标准化版本,正日益普及,功能也日益强大。自 ECMAScript 2015(ES6)发布以来,JavaScript 取得了巨大的进步,每年 6 月左右都会添加新功能。这些功能主要是通过提供新功能和更简洁的表达方式对 JavaScript 语言进行改进。它也改变了开发人员构建程序的方式。

6月22日,ECMA国际组织批准了ES12官方规范的最新版本,即ECMAScript 2021,新增了字符串、Promise、类等功能。以下列表展示了ES12的新功能。

  • 数字分隔符
  • 字符串 replaceAll()
  • 逻辑赋值运算符
  • Promise.any
  • 私有类方法
  • 私有 getter 和 setter
  • 弱引用

数字分隔符

数字分隔符用于分隔较大且难以阅读的数字,方法是将它们分隔在(_)一组数字之间。让我们通过一个例子来说明

夜晚

从上面的例子中可以看出,如果数值是一百万、一千万或十亿,那么读起来会比较困难。借助数字分隔符(_),我们可以像下面的例子一样,将同一个数字分成几组。

夜晚


字符串 replaceAll()

我发现这种方法是我在处理字符串和子字符串替换时在代码库中进一步使用的最喜欢方法,因为不需要使用正则表达式。

夜晚

从上面的字符串示例来看,This is interesting book that contains interesting examples我们希望interesting用替换JavaScript所有子字符串中的单词。替换字符串时,我们通常想到的第一个方法是replace()方法。然而,从上面的示例可以看出,此方法并未返回所需的结果,因为此方法仅替换子字符串中第一次出现的单词This is JavaScript book that contains interesting examples,而我们想要的是将字符串替换为This is JavaScript book that contains JavaScript examples。为了达到预期的结果,我们通常使用正则表达式,但由于正则表达式包含转义字符,因此使用正则表达式并不安全。

夜晚

不使用正则表达式,借助 ES12 功能,replaceAll()我们可以实现如下相同的结果

夜晚


逻辑赋值运算符

我们可能已经知道,JavaScript 目前支持算术赋值运算符,例如 a +=b(相当于 a = a + b)和按位赋值运算符,例如 a &=b(相当于 a = a & b),但缺少将逻辑运算符(&& || 和 ??)与赋值运算符组合的能力。ES12 特性提供了三种这样的逻辑赋值运算符:

  1. 逻辑空值赋值(??=) -> (x ??= y)(仅当 x 为空或未定义时才赋值)
  2. 逻辑与赋值(&&=) -> (x &&=y)(仅当 x 为真时才赋值)
  3. 逻辑或赋值(||=) -> (x ||=y )(仅当 x 为假时才赋值)

逻辑空值赋值运算符仅当左侧操作数为空(undefinednull)时才执行赋值。从下面的示例中可以看出,Superman仅当 user 为null或时,字符串才会赋值给变量 user undefined,否则不赋值。空值赋值运算符非常简单,因为我们只需要编写一行代码,而以前的方法只需要一个 if 语句并检查变量 user 是否为undefined或,null然后将值赋给 user。

夜晚

逻辑与赋值运算符仅当左侧操作数为真时才执行赋值。从下面的例子中num2可以看出,num1如果num1为真,则将 赋值给 ,否则将结果赋值给null,undefined, false, 0, or NaN

夜晚

逻辑或赋值运算符与逻辑与赋值运算符相反,如果左侧操作数为假,则执行赋值。从下面的例子中num2可以看出,num1如果num1是 ,则赋值null, undefined, false, or 0

夜晚

Promise.any

Promise.any接受一个可迭代的 Promise,并在其中一个 Promise 解析后立即解析。如果所有 Promise 均解析成功,则AggregateError返回一个错误,该错误以数组形式存在,每个 Promise 都包含单独的错误信息。这与需要解析所有可迭代的 Promise 才能解析单个 Promise 的Promise.any方式相反。Promise.all()

图片描述

从上面的例子中,我们设置了ABC承诺,其中 A 和 B 解决而 C 拒绝,并且作为结果A返回,因为它比B和 C 被拒绝的速度更快,而在和的情况下DE我们将所有承诺设置为被拒绝,因此AggregateError打印了一个。


私有类方法

自 ES6 推出以来,开发人员可以在 JavaScript 中创建类,这改变了面向对象模型的思维方式。这些类默认具有公共属性和方法,可以从类外部访问。为了解决这个问题,需要一种命名约定,用下划线(_)将这些属性和方法称为私有属性和方法,尽管这只是一个提示,并没有阻止它们在类外部访问。现在,借助 ES12 的新类特性,我们可以通过设置#

夜晚

从上面的例子中,当我们尝试访问该方法时,#private()会报错,因为该方法在类中是私有的。如果我们想在类外部访问此方法,则需要在类内部创建一个公共方法,并调用#private()方法中所示的方法showAll()


私有 getter 和 setter

与私有类方法的工作方式类似,类中的私有 getter 和 setter 也同样如此。

夜晚


弱引用

WeakRef 代表弱引用,主要用于实现用于保存大型对象的缓存或映射。JavaScript 具有垃圾收集机制,可以收集并自动删除不可达的变量,但此机制与引用对象不同,后者会将对象保留在内存中,从而减少内存占用。因此,使用 Wea​​kRef 时,大型对象不会因为出现在缓存或映射中而保持活动状态。然而,尽管 WeakRef 在某些情况下可能有用,但在使用它们时仍应谨慎,并尽可能避免使用它们,正如 TC39 所建议的那样。

夜晚

在上面的例子中,我们创建了一个虚构的大对象,然后使用 new WeakRef 创建了弱引用。我们可以通过调用以下方法访问该引用:deref()

最后的想法

每当我学习和尝试新事物时,我总是热衷于通过帮助其他人实现他们的目标来分享我的知识。我真的希望你觉得这篇文章很有趣并且对学习 ES12 功能有帮助。

欢迎任何反馈、建议或推荐。这将非常有帮助,并激励我进一步分享帖子。

编码愉快!

夜晚

文章来源:https://dev.to/naimlatifi5/ecmascript-2021-es12-new-features-2l67
PREV
记忆化 5 分钟内理解记忆化 简介 首先,记忆一个开销很大的函数 为我们的记忆器编写伪代码 真实代码时间 在开销很大的函数上测试我们的记忆器 只记忆纯函数! 结论
NEXT
5 个你值得一试的免费静态文档生成器。1. Docsify 2. Docusaurus 3. VuePress 4. Slate 5. Docute