ES2020 的新增功能

記錄一下這些喜歡的新功能

雙問號操做符

因爲JavaScript是動態類型的，所以在分配變量時，咱們須要牢記JavaScript對真值/假值的處理。 不少時候數字0和空字符串''就是咱們須要的值，咱們來看一下下面這個對象

雙管道 ||

let player = {
  profile: {
    number: 0,
    name: undefined,
    other: ''
  }
};

console.log(player.profile.number || "未知"); // 未知
console.log(player.profile.name || "未知"); // 未知

雙問號 ??

let player = {
  profile: {
    number: 0,
    name: undefined,
    other: ''
  }
};

console.log(player.profile.number ?? "未知"); // 0
console.log(player.profile.name ?? "未知"); // 未知

不少狀況下前端從後端獲取的數據中，並不肯定某個屬性存不存在，因此會作個判斷，若是不存在就給個默認值避免報錯。

可是數字0和空字符串''一般會被「誤傷」，好比nba球星威少、樂福、庫茲馬都是零號。

因此雙問號能夠更準確得去處理 null 和 undefined

可選操做符

在點號以前加一個問號

我太喜歡這個可選操做符了，和雙問號殊途同歸，配合使用安全加倍。
相信前端遇到過不少次這種錯誤：
Cannot read property 'xxx' of undefined
有木有？？？！！！
有時候是粗心，有時候是拼錯屬性名，有時候就是後端數據返回有問題。
直接上代碼：

不少時候會這樣處理，看上去沒什麼問題

// 假設從後端返回的是一個空對象
let player = {};
console.log(player.profile.number || "未知")

// Uncaught TypeError: Cannot read property 'number' of undefined

可選操做符，操做一下

let player = {};

console.log(player.profile.number ?? "23"); // player.profile is undefined`

console.log(player.profile?.number ?? "23"); //23

動態導入

假設你有一個utils工具文件，則其中某些功能可能不多使用，而導入其全部依賴項會很浪費資源。如今，咱們可使用 async / await在須要時動態導入依賴項。

const add = (num1, num2) => num1 + num2;

export { add };

const doMath = async (num1, num2) => {
  if (num1 && num2) {
    const math = await import('./math.js');
    console.log(math.add(5, 10));
  };
};

doMath(4, 2);

我在現實項目中就遇到過，好比回帖編輯器，不少人只是看一下別人的回覆樂呵樂呵，用戶不點擊回帖，就不必去加載整個editor.js

const replyBtn = document.querySelector('#replyBtn')
replyBtn.addEventListener('click', e => {
    e.preventDefault()
    (async () => {
        const Editor = await import('./editor.js')
        let editor = new Editor()
    })();
})

// 也能夠
replyBtn.addEventListener('click', e => {
    e.preventDefault()
    import('/modules/editor.js')
      .then(Editor => {
        let editor = new Editor()
      })
      .catch(err => {
        console.log(err)
      });
})

class的私有屬性

類的主要目的之一是將咱們的代碼包含在可重用的模塊中。 咱們可能會在不少地方用到這個類，有些屬性並不但願被類的外部訪問。

如今，經過在變量或函數前面添加一個簡單的哈希符號，咱們能夠將它們徹底保留給類內部使用。

class People {
  #message = "湖人總冠軍"
  bb() { 
    console.log(this.#message) 
  }
}

const p = new People()

p.bb() // 湖人總冠軍
console.log(p.#message) // Private name #message is not defined

Promise.allSettled

當咱們處理多個Promise時，尤爲是當它們相互依賴時，經過Promise.allSettled 能夠很好的記錄調試或者獲取每一個promise的狀態結果，它會返回一個新的Promise，僅當傳遞給它的全部Promise都完成時（settled 顧名思義能夠理解成定居、穩定）才返回。 這將使咱們可以訪問一個數組，其中包含每一個promise的一些數據。

相比於Promise.all ，若是傳入的promise中有一個失敗（rejected），Promise.all 異步地將失敗rejected的那個結果給失敗狀態的回調函數，而無論其它promise是否完成。

Promise.allSettled 會等全部傳入的promise的狀態變爲 fulfilled 或者 rejected

const p1 = new Promise((res, rej) => setTimeout(res, 1000, 24));

const p2 = new Promise((res, rej) => setTimeout(rej, 1000));

Promise.allSettled([p1, p2]).then(data => console.log(data));

// [
//   Object { status: "fulfilled", value: 24},
//   Object { status: "rejected", reason: undefined}
// ]