ES11初探,让你大开眼界

373 阅读4分钟

「这是我参与2022首次更文挑战的第16天,活动详情查看:2022首次更文挑战」。

一、String.prototype.matchAll()

String.prototype.matchAll()返回一个所有的匹配正则表达式的结果以及分组捕获组的迭代器

这么说可能不太理解,我们可以通过一个场景来具体的看它的作用。有如下一段代码,我们需要获取所有div内的内容。我们应该如何实现呢?

carbon.png

我们首先可以考虑用正则来实现,需要我们注意的是,regExp后必须有g全局修饰符,否则会死循环,因为一直都是从头开始查询。

carbon (1).png

有很多人会想到match方法实现,但是其实和我们想要的结果是有出入的,因为他会连标签一起打印出来。代码如下:

carbon (2).png

那么replace是否可以解决我们的需求呢,我们也可以来试一试,

carbon (3).png

ES11为我们提供了matchAll()方法,可以让我们更加方便的获取我们想要的结果。当没有g修饰符时,上述几种方法会死循环。而matchAll()方法会直接报错。

carbon (4).png

二、Dynamic import()

Dynamic import(),动态导入,其实也就是我们常说的按需加载。这其实是蛮重要的,尤其是现在都在强调首屏加载速度,如果一股脑都引入进来,那会严重影响我们的加载速度。所以,按需加载就显得尤为重要。

下面得一段代码是我们所写的伪代码,我们在点击一个按钮时,引入需要的模块。

carbon (5).png

其实,提到按需加载,你是不是很熟悉呢,你是不是回想起vue-router呢,其实,vue-router中就用到了按需加载。详情请查看:vue-router官方文档

image.png

三、新的原始数据类型 BigInt

BigInt是ES11新引入的一种新的原始数据类型。至今为止,原始数据类型分别有:number、string、boolean、null、undefined、Symbol、Bigint,共七种。

我们知道在JS中,最大的数是2^53,超出2^53是无法表示的,

carbon (6).png

BigInt的出现就是为了解决上述问题的,他可以表示超出2^53之外的数,有两种表示方法,

carbon (7).png

四、Promise.allSettled()

其实Promise.allSettled()的作用和Promise.all()的作用是一样的,但是他解决了一些Promise.all()的弊端问题,Promise.all()的中有一个失败,就会停止,当我们需要无论成功失败都能执行完时,Promise.all()就不能实现我们的想法,相反Promise.allSettled()就可以。我们先看一段代码,让我们加深一下理解。

下面的代码当全部成功时,返回如下: carbon (8).png

image.png

当中间一个处理失败时,返回如下,可以看到,只返回了失败的请求

carbon (9).png

image.png

我们希望上边有一个失败时也能将另外的两个成功的也能同时返回来,Promise.allSettled()可以帮我们实现。我们可以根据返回的status来处理筛选我们的结果。

carbon (10).png

image.png

五、globalThis

globalThis,提供一个标准的方式去获取不同环境下的全局对象。再次之前我们获取全局对象需要如下方式判断:

carbon (11).png

image.png

现在我们不必那么麻烦,我们可以用globalThis,直接获取

image.png

image.png

六、optional chaining

optional chaining的意思是可选链,可用用?.的形式链式寻找对象下的属性或方法。在之前我们需要按照下面这种方式却写:

carbon (13).png

在ES11引入optional chaining后,我们可以简化上边的方法

carbon (14).png

七、空值合并运算符

我们经常会遇到这中需求,当一个变量有值得时候显示这个值,没值得时候显示后面的那个值。如下, 我们希望当a有值得时候b等于2,没有的时候b等于3。

let a = 2

let b = a || 3

虽然上边的方法实现了我们的所想,但是,假如我们a = 0或者a = false时,我们也希望b和a相等的,但是结果却不是,代码如下

let a = 0

let b = a || 3

console.log(b) //3

这其实又为我们的初衷,所以,ES11帮助我们解决了这个问题,我们可以采用??的形式,

let a = 0

let b = a ?? 3

console.log(b) //0

这样我们的所想就能完全实现了,只有当a等于null或undefined的时候,才会是后面的值(3)