前端 ES2020(ES11) 最新特性介绍(含示例代码)

5,112 阅读3分钟

ES2020介绍

ES2020是对应于2020年的ECMAScript版本。这个版本没有ES6(2015)中包含的新特性多。但是,也加入了一些有用的特性。

本文通过简单的代码示例介绍了ES2020提供的特性。通过这种方式,您可以快速理解新特性,而不需要复杂的理解。

当然,有必要对JavaScript有一个基本的了解,以充分理解最好的介绍。

ES2020中新的#JavaScript特性包括:

➡️ String.prototype.matchAll

➡️ import()

➡️ BigInt

➡️ Promise.allSettled

➡️ globalThis

➡️ for-in mechanics

➡️ Nullish coalescing Operator

➡️ Optional Chaining

下面我们来一一讲解这些新特性:

String.protype.matchAll

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

Dynamic import

Dynamic import()返回所请求模块的模块名称空间对象的承诺。因此,现在可以使用async/await将导入分配给一个变量。

BigInt — Arbitrary precision integers

BigInt是第7个基本类型,它是一个任意精度的整数。变量可以代表2⁵³不仅是在9007199254740992处的最大值。

Promise.allSettled

Promise.allSettle返回一个promise,通过一组promise状态快照实现,但必须在所有原始promise都实现之,即要么实现,要么被拒绝。

我们说,如果一个promise不是pending状态,即它要么是fulfilled,要么是rejected。

Standardized globalThis object

这在ES10之前没有标准化。 在生产代码,您可以通过编写以下怪异的代码来让自己可以在多个平台‘标准化’。

for-in mechanics

ECMA-262 留下for (a in b)的指令…几乎完全不确定,但实际引擎至少在某些情况下趋于一致

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

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

Nullish coalescing Operator

在执行属性访问时,如果属性访问的结果为null或未定义,通常需要提供默认值。目前,在JavaScript中表达这种意图的一种典型方法是使用||操作符。

这对于null和undefined值的常见情况很好用,但是存在许多可能产生令人惊讶结果的虚假值。

无效合并运算符旨在更好地处理这些情况,并用作针对无效值(null或undefined)的相等性检查。如果表达式在??的左侧 运算符求值为undefined或null,返回其右侧。

Optional Chaining

在寻找树状结构深处的属性值时,通常必须检查中间节点是否存在。

的可选链接运营商允许处理其中许多情况下无需重复自身和/或分配在临时变量中间结果。

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

对于丢失的情况,当需要一些未定义的值时,通常可以使用Nullish合并运算符来处理

结论

JavaScript是一种实时语言,对于Web开发而言,这是非常有益的。自2015年ES6出现以来,我们一直在朝着一种语言的方向发展。在这篇文章中,我们回顾了ES2020中出现的功能。

尽管这些功能中的许多功能对于Web应用程序的开发而言可能不是必需的,但它们提供了以前可能通过技巧或大量细节实现的可能性。

转载请注明出处。