ES2020新特性抢先看

String.property.matchAll()

伴随着es2020的到来，matchAll函数也正式来到了stage4阶段了，咱们先看下这个函数会做用。

做用

matchAll() 方法返回一个包含全部匹配正则表达式的结果及分组捕获组的迭代器。

语法

str.matchAll(regexp)

参数

regexp: 是一个正则表达式对象，若是传的不是一个正则表达式对象，那么会隐式的调用new Regexp()来将其转换为一个正则表达式对象

返回值

返回一个迭代器

获取全部的匹配项

首先咱们来看一个例子,在matchAll函数出现以前，咱们若是想要获取一个字符串中全部的匹配项，咱们应该这样作

const regexp = /[a-z]*(ball)/g;
const str = 'table football, basketball';
let match;

while ((match = regexp.exec(str)) !== null) {
    console.log(`${match[0]} start=${match.index} end=${regexp.lastIndex}.`);
}
复制代码

使用exec函数，而后经过循环来实现获取全部的匹配项，当有了matchAll()方法以后，他就变得简单了

const regexp = /[a-z]*(ball)/g;
const str = 'table football, basketball';
let match;

match = str.matchAll(regexp);
for(let i of match) {
    console.log(i);
}
复制代码

注意：在咱们使用matchAll的时候，必需要加上"/g"进行全局匹配，不然只会返回首个匹配！！！

捕获组

由于当使用match()和/g标志方式获取匹配信息时，捕获组会被忽略

var regexp = /t(e)(st(\d?))/g;
var str = 'test1test2';
str.match(regexp); 
// Array ['test1', 'test2']
复制代码

可是当咱们使用matchAll的时候，咱们是能够捕获组的

var regexp = /t(e)(st(\d?))/g;
var str = 'test1test2';
let array = [...str.matchAll(regexp)];
console.log(array);
复制代码

咱们能够看到，咱们已经将组捕获了

import()动态导入

以前咱们使用import大部分都是静态导入的，例如这样import a from "xx",es2020中推出了动态导入，格式以下

import(`xxx`) //注意和静态导入的格式区别
复制代码

接下来介绍一下动态导入的优势。

1. 首先能够优化性能问题，咱们能够在须要引入的时候在导入某个文件，而不是在当前组件加载时就直接导入文件
2. 咱们能够在动态导入后进行一系列的操做，捕获操做或者其余操做均可以 咱们看一段代码，就能够知道他的好处了

const main = document.querySelector("#main");
main.addEventListener("click", e => {
      e.preventDefault();
      import(`./section-modules/${link.dataset.entryModule}.js`)
        .then(module => {
          console.log(0);
        })
        .catch(err => {
          main.textContent = err.message;
        });
    });
复制代码

上面这段代码是咱们在点击id为main这个元素的时候才会导入这个文件，而且导入以后能够作一系列的操做。

bigInt

在es2020中正式将bigInt做为一种新的数据类型加入到js中

bigInt有两种使用方式

1. let a = 11111n
2. let a = BigInt(9007199254740);

bigInt的出现使得咱们能够计算一些比较大的数了

var bigNumRet = 9007199254740993n+ 9007199254740993n; // -> -> 18014398509481986n
复制代码

注意： 在咱们使用typeof对bigInt类型的数据进行操做的时候，返回就是bigInt typeof 9007199254740993n; // -> "bigint"

promise.allSelected()

在介绍这个函数以前，咱们首先看一下const p =promise.all([p1,p2,p3])这个函数， 这个函数会接收一个数组做为参数，同时数组内的每个数组都是一个promise对象，若是数组内的每个promise都是fullfilled，那么最后的p就是fullfilled的状态，可是只要有一个是rejected，那么p的状态就会是rejected，其余的promise都不会执行了

若是咱们想把全部的promise都执行完呢？此时咱们就可使用promise.allSelected，他会将当前数组内全部的promise都执行完后，将全部的状态都放到一个数组内

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];
 
Promise.allSettled(promises).
  then((results) => results.forEach((result) => console.log(result.status)));
 
// expected output:
// "fulfilled" "rejected"
复制代码

Optional Chaining 可选链运算符

咱们先看个例子，在看可选链运算符怎么使用

当咱们想要去访问一个深层次不存在的属性时，咱们可能会这样作

let person = {
    age: 14,
    name: 'wang'
    parent: {
        fa: 'wang'
    }
} 

console.log(person && person.parent && person.parent.mo)//这样才不会报错
复制代码

可是有没有以为这样访问有一些麻烦呢？此时咱们的经过可选链运算符就能够起做用了，咱们先来看一下可选链运算符的真面目 ?. 小朋友，你是否有不少问号？？？哈哈，没错，可选链运算符就是这样子的，有了可选链运算符以后，咱们能够直接这么写

person?.parent?.mo 
复制代码

没错，就是如此的简单

空值合并运算符

有了上面那个可选链运算符，他是比较奇葩的一种写法，咱们接下来介绍的这个空值合并运算符也是比较奇葩的??没错，他就是这样子，咱们来使用一下它

let a = null ?? 'default'
console.log(a) // -> default

复制代码

经过上面这个例子咱们能够看出来， ??好像和 || 功能相似啊，没错，??的出现就是为了弥补||的不足，首先咱们在使用||的时候，当遇到''的时候，会将其识别为falsy值，因此输入的是||后面的值，可是咱们在使用??则不一样

let a = '' || 'a'
a // -> 'a'

let b = '' ?? 'a'
b // -> ''
复制代码

这就是咱们说的2020的部分新特性了，还有一些会后续补上