ES9必会知识,助你提高效率

214 阅读4分钟

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

一、for await of

for await of 异步迭代,用于遍历异步iterator接口。

之前我么学些过for of用于遍历同步接口,我们可以通过代码来看看两种方式的不同之处。

1.2 同步迭代

下面得代码是一段伪代码,本身arr就是可以遍历的,这样写主要是为了看iterator的过程。

carbon.png

image.png

1.2 异步迭代

我们想要的是假如说数组内是三个异步操作的函数,我们在遍历的时候需要一个执行完在执行下一个,按顺序输出。代码如下:

carbon (2).png 上面的的代码我们声明一个getPromise函数,在其内部进行一些异步操作。声明一个数组asyncArr,异步迭代这个数组,按顺序输出结果,如果我们用for of处理会怎样呢?我们可以看一下

for(let item of asyncArr) {
    console.log(item);
}

image.png

可以看到是三个pending状态,这不是我们想要的结果,说明for of不能进行异步迭代。那么我们用for await of试试呢。

for await (let item of asyncArr) {
    console.log(item);
}

上边这段代码可行么?答案是否定的,我们之前学习async/await函数时学习过,await不能单独存在,一定要在async内部使用,所以我们可以这么使用,

async function test() {
    for await (let item of asyncArr) {
        console.log(item);
    }
}

test()

image.png 我么可以看到,会按顺序打印,这就是异步迭代。同时,我们也可以用异步迭代协议来输出这段代码,我们需要对上边的getPromise进行些许改动。

carbon (3).png

相比于同步迭代,异步采用的事for await of 和Symbol.asyncIterator。我们需要根据具体的场景来选择对应的方式。

二、ES9放松了模板字符串对文字的限制

我们在之前学些模板字符串时,了解了一种带标签的模板字符串,如下

carbon (4).png

可以看到打印出如下内容,这就是带标签的模板字符串的应用 image.png

还有如下一种方式,

carbon (5).png

image.png 上边这种情况是可以的,但是在ES9之前,下边的这种写法会报错,

carbon (6).png 但是在ES9放松了模板字符串对文字的限制之后就不在报错了,会打印出如下结果:

image.png

但是要注意的是,这种写法只能用在带标签得到模板字符串中,模板字符串的普通使用情况下仍然会报错,如下:

carbon (7).png

image.png

三、ES9对正则表达式的扩展

3.1 dotAll

我们知道'.'在正则表达式中可以匹配任意一个单个字符,但是其实也是有例外的,它并不能匹配行中间符和和多字符unicode。

carbon (8).png

在ES9中新增了dotall模式,可以做到真正的匹配任意的单个字符。dotAll写法就是后边加一个s,代码如下:

carbon (9).png

我们还可以回顾一下其他的符号在正则里分别代表什么, g-全局匹配 i-忽略大小写 m-跨行匹配 y-粘连(sticky)修饰符 u-unicode修饰符 s-dotAll模式

3.2 具名组匹配

具名组匹配就是在正则表达式的的时候给每一个组匹配一个名字。为什么要这么做呢?我们可以看一下下面得代码:

carbon (11).png image.png

上边的代码我们想要获得具体的年月日就只能按照如下方式获取,但是如果当一个正则及其复杂的时候,这种方法就并不可行了。

carbon (12).png

上边的方法具有一定的弊端,所以ES9中新增了具名组匹配,其使用方式如下

carbon (13).png 可以看到我们可以用?<>的形式来命名,打印结果中会有一个groups对象,在其中我们可以找到我们所需要的变量。

image.png 这样我们就可以按照我们的意愿获取我们想要的值。

carbon (14).png

3.3 后行断言

断言的意思就是对当前位置匹配的前面或后面进行匹配或测试。

后行断言和先行断言一样,只是前后的问题。下面就是后行断言

image.png 如果匹配上,打印出:

image.png 如果没有匹配上,如下:

image.png

image.png 后向断言也可以不配不以某某开头,用?<!表示

image.png

断言又分为先行断言和后行断言。先行断言是ES5就有的,我们可以先简单看一下,先行断言就是判断当前元素是否是以某些元素开头或者不是以某些元素开头的。

image.png

需要注意的事先行断言是?=,这是和后行断言?<=不一样的地方