ECMAScript 2020的新功能

JavaScript是最流行的编程语言之一，每年都有新的特性加入。本文介绍了ECMAScript 2020(也称为ES11)中添加的新功能。

在ECMAScript 2015(也称为ES6)推出之前，JavaScript的发展非常缓慢。但是从2015年开始，每年都会增加新的功能。需要注意的是，现代浏览器并不支持所有的特性，但是由于JavaScript编译器Babel的存在，我们已经可以使用新的特性了。本文将介绍ECMAScript 2020(ES11)的一些最新特性。

可选链接

大多数开发人员都遇到过这个问题:

TypeError:无法读取未定义的属性“x”

此错误表明我们正在访问不属于该对象的属性。

访问对象的属性

const flower = { colors:{ red:true } } console . log(flower . colors . red)//正常运行console . log(flower . species . lily)//抛出错误:typeerror:无法读取属性 # 39；莉莉 # 39；在这种情况下，JavaScript引擎会抛出这样的错误。但在某些情况下，价值存在与否并不重要，因为我们知道它会存在。所以，可选的链式调用就派上了用场！

我们可以使用一个可选的链操作符，由一个问号和一个点组成，表示不应该出现错误。如果没有值，应该返回undefined。

console.log(flower.species？。lily) //输出未定义。当访问数组或调用函数时，还可以使用可选的链调用。

存取阵列

让鲜花=[ # 39；莉莉 # 39；, '黛西 # 39；, '罗斯 # 39；]console . log(flowers[1])//Output:daisy flowers = null console . log(flowers[1])//抛出错误:typeerror:无法读取属性 # 39；1'nullconsole.log的(花？。[1]) //输出:未定义的调用函数

let plant flowers =()= gt；{ return # 39兰花 # 39；} console.log(plantFlowers())//Output:orchidsplantflowers = null console . log(plant flowers())//抛出错误:typeerror: plantflowers不是函数console . log(plant flowers？。())//Output: undefinedNullish合并空值合并

目前，逻辑运算符||仍然是为变量提供回退值所必需的。适用于很多情况，但不能适用于一些特殊场景。例如，初始值是一个布尔值或一个数字。例如，我们想给一个变量赋值。当变量的初始值不是数字时，默认为7:

Let = 1 let myNumber = Number || 7变量myNumber等于1，因为左边的(number)是真值1。但是当变量个数不是1而是0的时候呢？

Let = 0 let my number = number || 70是一个伪值，所以即使0是一个数。变量myNumber将被赋给右边的7。但结果并不是我们想要的。好在它由两个问号组成:？？merge运算符可以检查变量number是否是一个数字，而无需编写额外的代码。

let number = 0let myNumber = number？？7运算符右边的值只有在左边的值等于null或未定义时才有效。因此，示例中变量myNumber的值现在等于0。

私有字段私有字段

许多带有类的编程语言允许将类定义为公共的、受保护的或私有的属性。公共属性可以从类的外部或子类访问，受保护的属性只能由子类访问，私有属性只能由子类访问。JavaScript从ES6开始就支持类语法，但是私有字段直到现在才被引入。要定义私有属性，它前面必须有一个哈希符号:#。

班花{ # leaf _ color = 绿色 ；构造函数(名称){ this.name = name} get_color() {返回此。#叶子_颜色；}}const兰花=新的花朵( 兰花 );console . log(orchid . get _ color())；//输出:greenconsole.log(兰花。# leaf _ color)//错误:语法错误:私有字段 # 39；# leaf _ color # 39必须在封闭类中声明。如果我们从外部访问一个类的私有属性，我们必然会报告一个错误。

静态字段静态字段

如果要使用类的方法，必须首先实例化一个类，如下所示:

class Flower { add _ leaves(){ console . log( ；添加树叶 );} } const rose = new Flower()；rose . add _ leaves()；Flower.add_leaves() //抛出错误:TypeError: Flower.add _ leaves不是函数试图访问未实例化的Flower类会抛出错误。但是由于静态字段，类方法可以由static关键字声明，然后从外部调用。

class Flower { constructor(type){ this . type = type；}静态create_flower(type) {返回新花(type)；} } const rose = flower . create _ flower( ；罗斯 );//正常运行顶级Await顶级Await

目前如果使用await得到promise函数的结果，使用await的函数必须用async关键字定义。

const func = async()= gt；{ const response = await fetch(URL)}令人头疼的是，在全局范围内等待一些结果基本上是不可能的。除非你用一个直接调用的函数表达式(IIFE)。

(async()= gt；{ const response = Await fetch(URL)})()但是在引入顶级Await之后，不需要将代码包装在异步函数中，如下所示:

特性const response = await fetch(url)对于解决模块依赖性或者当初始源不可用并且需要备用源时非常有用。

让vu etry { Vue = wait import( # 39；url _ 1 _ to _ vue # 39)} catch { Vue = await import( # 39；URL _ 2 _ to _ vue)} promise . all settled方法

在等待多个承诺返回结果时，我们可以使用promise.all ([promise _ 1，promise _ 2])。但问题是，如果其中一个请求失败，就会抛出一个错误。但是，有时候我们希望一个请求失败后，其他请求的结果能够正常返回。针对这种情况，ES11推出了Promise.allSettled

promise _ 1 = promise . resolve( # 39；你好 # 39；)promise_2 = new Promise((resolve，reject)= gt；setTimeout(拒绝，200， # 39；问题 # 39；))Promise.allSettled([promise_1，promise_2])。然后(([promise_1_result，promise _ 2 _ result])= gt；{ console . log(promise _ 1 _ result)//输出:{ status: # 39；履行 # 39；，值: # 39；你好 # 39；} console . log(promise _ 2 _ result)//输出:{ status: # 39；被拒绝了 # 39；，原因: # 39；问题 # 39；}})承诺成功会返回一个包含状态和值的对象，承诺失败会返回一个包含状态和原因的对象。

动态导入动态介绍

可能你在webpack的模块绑定中用过动态引入。但是对这个特性的本地支持已经到来:

//Alert.js导出默认{ show(){//code } }//使用Alert.js的文件导入( # 39；/components/alert . js # 39；) .然后(Alert = gt{Alert.show()})考虑到很多应用使用webpack之类的模块打包器进行代码翻译和优化，这个功能还没有太大的作用。

MatchAll匹配所有项目

如果你想在一个字符串中找到所有正则表达式的匹配项及其位置，MatchAll非常有用。

const regex =/\ b(apple)+\ b/；const水果= 梨，苹果，香蕉，苹果，橘子，苹果 ；for(fruits . match(regex)的const match)){ console . log(match)；}//output/// # 39；苹果 # 39；// '苹果 # 39；相比之下，matchAll返回更多信息，包括查找匹配项的索引。

for(const match of fruits . match all(regex)){ console . log(match)；}//output///[// # 39；苹果 # 39；,// '苹果 # 39；，//索引:6，//输入: # 39；梨、苹果、香蕉、苹果、橘子、苹果 # 39；，// groups: undefined// ]，//[// # 39；苹果 # 39；,// '苹果 # 39；，// index: 21，//input: # 39；梨、苹果、香蕉、苹果、橘子、苹果 # 39；，// groups: undefined// ]，//[// # 39；苹果 # 39；,// '苹果 # 39；，//索引:36，//输入: # 39；梨、苹果、香蕉、苹果、橘子、苹果 # 39；，//groups:undefined//]global this全局对象

JavaScript可以在不同的环境下运行，比如browser或者Node.js浏览器中可用的全局对象是变量window，但在Node.js中是一个名为global的对象为了在不同的环境下使用统一的全局对象，引入了global这个。

//浏览器窗口= = global this//true//node . js global = = global this//true bigint

JavaScript能准确表达的最大数是2 ^ 53 ^ -1。BigInt可以用来创建更大的数字。

consttebiggernumber = 9007199254740991n consteventbigernumber = Bigint(9007199254740991)结论

我希望这篇文章对你有用，和我一样，我也期待JavaScript即将推出的新特性。如果想了解更多，可以看看tc39委员会官方Github仓库。

推荐教程:《JS教程》以上是ECMAScript 2020新特性的详细介绍。更多请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：ECMAScript 2020的新功能 https://zhujicankao.com/77589.html