即将到来的es2020新特性

1,021 阅读2分钟

简介:

es2020是ECMAScript 2020年推出的版本,

即便不像es2015一样包含许多特性,但es2020还是引入了不少有用的特性。


以下会介绍一些es2020主要的一些新特性:

a、空位合并运算符 Nullish coalescing Operator

b、可选链运算符 Optional Chaining

c、动态import dynamic import

d、BigInt

e、Promise.allSettled方法 Promise.allSettled

f、globalThis

g、字符串matchAll方法 String.prototype.matchAll


1、空位合并运算符 Nullish coalescing Operator

当我们设置变量的时候,我们需要设置变量的默认值,一个典型的写法是使用 || 来表示默认值,


空位合并运算符主要判断运算符左侧的值是否是null 或者 undefined,如果是的话,就返回运算符右侧的值。


传统写法:

image.png

es2020的写法

image.png


2、可选链运算符 Optional Chaining


当遇到一些我们需要获取json对象的属性值的时候,我们需要提前检验该属性是否存在,

如果使用可选链运算符,就不需要重复的写json对象属性的判断了,会简洁许多。


传统写法 vs es2020写法

image.png


传统写法 vs es2020写法(默认为undefined的场景)

image.png


传统写法 vs es2020写法(默认为其他值的场景)

image.png


3、动态import dynamic import

动态引入,es2020后可以按需import:动态import返回一个promise对象,

也可以使用async/await的写法,将import返回的对象assign给一个常量/变量


es2020的写法

image.png


4、BigInt

顾名思义,就是在javascript表示较大的整数的,多大的整数呢,大于(2^53-1 )的整数,

大概是这么大,大于这个数,传统js无法处理,es2020后可以通过BigInt这个新增的原始类型(primitive type)来处理。

image.png

es2020的写法

image.png


5、Promise.allSettled方法 Promise.allSettled

es2020增加了promise allSettled方法,此方法在所有promise settled完毕之后返回一个promise对象集合的数组,promise非pending状态(比如resolved或者reject就会被成为settled)。

其与promise.all的不同点是,promise.all 需要所有promise都resolve。


es2020的写法

image.png


6、globalThis

es2020对于globalThis进行了标准化。

image.png

7、字符串matchAll方法 String.prototype.matchAll

String matchAll方法返回一个iterator,相对String match方法,包含更多的信息。


传统写法以及es2020的写法

image.png




参考文档:

dev.to/carlillo/es…

levelup.gitconnected.com/new-feature…

image.png