ES2020的js新特性

1. 可選鏈

可選鏈，?.操作符，在訪問屬性或方法時，若存在為空的中間量，則返回undefined，在長鏈條的屬性訪問時，可節省代碼

const stu = {
    name: 'xiaoming',
    school: {
        name: "xxx"
    }
}

const cityName = stu.address?.city?.name
//cityName: undefined

const res = stu.someMethod?.()
//res: undefined

在可選鏈不能用的情況下，可以用lodash的get方法代替：

_.get(stu, 'adderss.city.name', 'default name');

2. 空值合並運算符

空值合並，??操作符，可以避開null和undefined，得到一個默認值。相比於a || b這種操作，對0、NaN等值不會轉化為false，只處理null和undefined，規避了一些有效值

const foo = null ?? 'default'
//foo: 'default'

const baz = 0 ?? 12
//baz: 0

3. 管道運算符

|>操作符，類似於linux的管道，可以串行的執行函數

const double = (n) => n * 2;
const increment = (n) => n + 1;

double(increment(double(double(5)))); // 42

//使用管道操作符
5 |> double |> double |> increment |> double; // 42

4. 私有變量

在變量前加#，可以定義私有變量，僅能在類內部使用

class Message {
  #message = "Howdy"

  greet() { console.log(this.#message) }
}

const greeting = new Message()

greeting.greet() // Howdy
console.log(greeting.#message) // Private field '#message' must be declared in an enclosing class

5. Promise.allSettled

Promise.all的缺陷是，有一個任務reject，所有的任務都掛掉，這通常不是我們想要的結果。
Promise.allSettled，就是為了解決這個問題。它執行完后，返回所有的執行結果，無論是resolve還是reject，在放在一個數組里返回

Promise.allSettled([
    Promise.reject({code: 500, msg: '服務異常'}),
    Promise.resolve({ code: 200, list: []}),
    Promise.resolve({code: 200, list: []})
])
.then((ret) => {
/*
    0: {status: "rejected", reason: {…}}
    1: {status: "fulfilled", value: {…}}
    2: {status: "fulfilled", value: {…}}
*/

// 過濾掉 rejected 狀態，盡可能多的保證頁面區域數據渲染
RenderContent(ret.filter((el) => {
    return el.status !== 'rejected';
}));

6. 動態導入(Dynamic Import)

動態的import一個模塊，返回一個promise，可以在module加載完成后做一些事情，或者捕獲錯誤

el.onclick = () => {
    import(`/path/current-logic.js`)
    .then((module) => {
        module.doSomthing();
    })
    .catch((err) => {
        // load error;
    })
}

7. Top-level await

通常await只能在async函數中使用，新提案中，允許在頂層調用await，簡化模塊加載調用，可以和dynamic import配合使用

const strings = await import(`/i18n/${navigator.language}`);

let jQuery;
try {
  jQuery = await import('https://cdn-a.example.com/jQuery');
} 
catch {
  jQuery = await import('https://cdn-b.example.com/jQuery');
}

8. BigInt

ES2020提供一種新的數據類型：BigInt。使用 BigInt 有兩種方式：

//在整數字面量后面加n。
var bigIntNum = 9007199254740993n;

//使用 BigInt 函數。
var bigIntNum = BigInt(9007199254740);
var anOtherBigIntNum = BigInt('9007199254740993');

//通過 BigInt， 我們可以安全的進行大數整型計算
var bigNumRet = 9007199254740993n+ 9007199254740993n; // -> -> 18014398509481986n
bigNumRet.toString(); // -> '18014398509481986'

BigInt 是一種新的數據原始（primitive）類型。

typeof9007199254740993n; // -> 'bigint'

9. String.prototype.matchAll

//有g，匹配到所有項，但是未顯示匹配的group
var str = '<text>JS</text><text>正則</text>';
var reg = /<\w+>(.*?)<\/\w+>/g;
console.log(str.match(reg));
// -> ["<text>JS</text>", "<text>正則</text>"]

//無g，只匹配到第一項，這回顯示了匹配的group
var str = '<text>JS</text><text>正則</text>';
var reg = /<\w+>(.*?)<\/\w+>/;
console.log(str.match(reg));
// 上面會打印出
/*
[
    "<text>JS</text>",
    "JS",
    index: 0,
    input:
    "<text>JS</text><text>正則</text>",
    groups: undefined
]
*/

matchAll解決的就是，既能匹配出所有項，也能得到每項的詳細信息，例如group的匹配, matchAll, 會返回一個迭代器

var str = '<text>JS</text><text>正則</text>';
var allMatchs = str.matchAll(/<\w+>(.*?)<\/\w+>/g);
for(const match of allMatchs) {
  console.log(match);
}
/*
第一次迭代返回：
[
    "<text>JS</text>",
    "JS",
    index: 0,
    input: "<text>JS</text><text>正則</text>",
    groups: undefined
]
第二次迭代返回：
[
    "<text>正則</text>",
    "正則",
    index: 15,
    input: "<text>JS</text><text>正則</text>",
    groups: undefined
]
*/

會得到匹配到的所有項，及其詳細信息。