JavaScript ES2020 新特性的实例

简介

ES2020 是 ECMAScript 对应 2020 年的版本。这个版本不像 ES6 (2015)那样包含大量新的功能特性。但是,也加入了很多有用的特性。

本文以简单的代码示例来介绍 ES2020 提供的功能特性。这样,你可以很快理解这些新功能,其实并不需要多么复杂的解释。

当然,还是需要具备基本的 JavaScript 知识,才能完全理解这些最佳介绍。

#JavaScriptES2020 版本新功能有:

➡️ String.prototype.matchAll
➡️ import()
➡️ BigInt
➡️ Promise.allSettled
➡️ globalThis
➡️ for-in mechanics
➡️ 可选链
➡️ 空值合并运算符

String.protype.matchAll

matchAll() 方法会返回与正则表达式匹配的所有结果的迭代器,包括捕获组。

动态引入

动态 import() 返回所请求模块的模块名称空间对象的Promise。因此,可以使用 async/await 将引入赋值给变量。

BigInt — 任意精度整数

BigInt 第 7 个原始类型,并且是个任意精度整数。变量现在可以表示 ²⁵³ 数字,而不仅仅是最大 9007199254740992。

Promise.allSettled

Promise.allSettled 在所有原始的 promise 完成决议后,返回 promise 状态快照数组的 promise,即成为完成或拒绝状态。

我们说的,一个 promise 已经决议,而不是挂起状态,就是说它既没有完成,也没有拒绝。

标准化 globalThis 对象

全局 this 在 ES10 之前并未标准化。
在生产代码中,你会通过自己写如此怪异的代码来实现跨多平台的 「标准化」:

for-in 结构

ECMA-262 几乎全部未指明 for (a in b) 顺序 ,但真正的引擎至少在某些情况下是一致的。

历史上为获得完整的 for-in 顺序规范的一致意见所做的努力一再失败,部分原因是所有的引擎都有自己独特的实现,这是大量工作的结果,而且它们并不想重新讨论。

总之,当使用 for (a in b) 控制结构时,不同的引擎已就如何迭代属性达成一致,从而使行为标准化。

空值合并运算符

当我们访问属性,其结果为 null 或 undefined 时,我们希望可以为它提供一个默认值。现在,在 JavaScript 中通常的做法是使用 || 运算符。

对于空值和未定义值,它们有很有用,但是很多伪值(译者注:类似 false、0 之类的值)会产生意料之外的结果。

空值合并运算符 就是为了更好地处理这些情况,并对空值进行检查 (null or undefined)。如果 ?? 运算符的左表达式为 undefined 或 null,就返回其右侧内容。

可选链

在查找树状结构中的属性值时,常常需要检查中间节点是否存在。

可选链操作符 允许处理许多这些情况,而不重复自己和/或分配中间结果的临时变量。

同样,许多 API 返回一个对象或 null/undefined,并且可能只想在结果不为null时才从结果中提取属性:

如果对于丢失的情况需要除 undefined 以外的其他值,通常可以使用 空值合并 运算符来处理:

总结

JavaScript 是一活跃语言,这对 web 开发非常有益。自 2015 年 ES6 面世以来,我们的语言就一直蓬勃前进。在这篇博文中,我们就回顾了 ES2020 中的功能特性。

尽管这其中很多功能特性并不是你 Web 应用中的必需品,但是它们提供了之前需要同构技巧或大量冗长代码代码才能实现的可能性。

本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://dev.to/carlillo/es2020-features-...

译文地址:https://learnku.com/f2e/t/39536

本文为协同翻译文章,如您发现瑕疵请点击「改进」按钮提交优化建议
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!