【D1n910学习】 ECMAScript 2020 新特性

正常操作，正常分析，大家好，我是 D1n910。

本文学习自掘金

[译] ECMAScript 2020 新特性

作者：Huup_We
链接：https://juejin.im/post/5ec34ed96fb9a0437b76f638
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

主要内容是 ECMAScript 2020（E11） 的一些新特性。

以下代码内容，主要跑在

Google Chrome 版本 83.0.4103.61（正式版本） （64 位）

——能跑就跑，不能跑的我会说明。

ECMAScript 2020 新特性

Optional Chaining 可选链式调用

当我们访问一个不属于对象的属性时，会报错。实际上，一般情况下，我们都知道会有这个内容。

我们经常会用 a.b && a.b.c 的写法来解决这种问题。

现在通过可选链式调用的方法也可以解决这个问题。

可选链式操作符由一个问好和一个点组成，它表示在访问一个不属于对象的属性时，不应该报错，应该返回 undefined。

在访问数组、函数的时候，也会有类似上面的报错。也可以用可选链式调用的进行处理。

访问数组

访问函数

Nullish Coalescing 空值合并

现在为了变量提供回退值，逻辑操作符 || 是常用的办法。

但是在一些特殊的场景中，却不是很适用。

比如下面的场景，我们给我们的变量进行赋值，规则是如果我们要赋的值不是数字时，就默认为 7。

 但是如果我们的初始值为 0 的话，就不适用这种场景了。

空值合并的合并操作符 ?? 用以可以检查左值是否是 null 或 undefined ，如果是才会返回右值。

Private Fields 私有字段

具有 classes 的编程语言允许定义类为公共的，受保护的或私有的属性。Public 属性可以从类的外部或者子类访问，protected 属性只能被子类访问，private 属性只能被类内部访问。

Javascript 从 ES6 开始支持类语法，但是直到现在才引入私有字段 private。

要定义私有属性，需要在其前面加上散列符号：#

像下面这样：

我们从外部访问类的私有属性，势必会报错

Static Fields 静态字段

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

如果试图去访问没有实例化的方法，是会报错的。

通过 static 关键词声明类的方法，就可以直接调用了。

这个方法是类本身的方法，不是实例的方法， 所以本身的实例是没有这个方法的。

作用是为了定义一些类本身就有的属性，比如一个“人”类，本身的属性就是有两个眼睛、两只手，两双腿。那么这些其实本身就可以直接获得到，没有必要在实例里面去专门定义然后获得。

Toop Level Await 顶级 Await

目前，如果用 await 获取 promise 函数的结果（就是想要等异步方法执行完成），那么使用 await 的函数必须用 async 关键字定义。

下面这里演示了使用 promise 时，不用await和用await的不同。

await 会等到异步执行完成后，再继续后继的同步事件。

这个顶级 awiat 的意思可以直接不用 async 就能够在全局里使用 await。

文章里说这个特性对于解决模块依赖或当初始源无法使用而需要备用源的时候是非常有用的。

let Vue

try {

    Vue = await import('url_1_to_vue')

} catch {

    Vue = await import('url_2_to_vue)

} 

不过我感觉好像没啥用 QAQ

等以后看看是否有用。

Promise.allSettled 方法

等待多个 promise 返回结果时，我们可以用 Promise.all([promise_1, promise_2])。但问题是，其中一个请求失败了，就会抛出错误。如果我们想要获得执行的返回，这里就不是很适用。

如果使用 allSettled 的话，就可以在 then 里捕捉到所有的执行返回。

Dynamic Import 动态引入

用 webpack 的模版绑定中已经使用过动态引入，现在也有原生支持了。

* 在 chrome 中，实测 default 是放到 object 里的，不能够和原文一样直接调用。

MatchAll 匹配所有项

MathcAll 的作用是查找字符串中所有正则表达式的匹配项和它们的位置。

本身有个 match

这边按照原文用的话，会报错。

Uncaught TypeError: String.prototype.matchAll called with a non-global RegExp argument

查了 MDN 文档后，了解到 matchAll 的用法一般是 Symbol.matchAll。

所以想要像原文一样的用法，应该是像下面这样使用。

感觉没啥用，说是可以包括找到匹配项的索引 —— 目前感觉暂时没啥用。

globalThis 全局对象

Javascript 现在我们知道的，可以在浏览器端或者服务器端（Node.js）运行。

浏览器端的全局对象是 window

服务器端的全局对象是 global

为了统一这两个全局对象，特此推出了 globalThis

——这个在做 SSR 应用的时候，比较有用～

BigInt

（1）JavaScript 中能够精准表达的最大数字是 2^53 - 1。

（2）使用 BigInt 可以用来创建更大的数字。

对于 （1），不用浏览器有不同的标准，比如谷歌浏览器，就能够表达 2^53次方

到了一定数额就不能精准表达了

转换成 BigInt 类型，就可以精准描述和加减法了，当然，加减法直接加减的话要用 BigInt 类型的，特征是 BigInt 函数或者 后缀为n的数字。

如果类型不同，会报错的。

END