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的部分新特性了，還有一些會後續補上