ES2020的一些新特性

前言

	ES2020 是 ECMAScript 對應 2020 年的版本。
	這個版本不像 ES6 (ES2015)那樣包含大量新特性。但也添加了許多有趣且有用的特性。

1.私有類變量#

	類的主要目的之一是將我們的代碼包含在可重用的模塊中。
	因爲您將創建一個在許多不同地方使用的類，所以您可能不希望其中的所有內容在全局範圍內都可用。

	現在，通過在變量或函數前面添加一個簡單的哈希符號，我們可以將它們完全保留，給類內部使用

class Message {
  #message = "Howdy"
  
  greet() { console.log(this.#message) }
}

const greeting = new Message()

greeting.greet() // Howdy
console.log(greeting.#message) // Private name #message is not defined

2.Promise.allSettled

	當我們使用多個promise時，尤其是當它們相互依賴時，記錄每個事件的發生以調試錯誤可能很有用。
	使用Promise.allSettled，我們可以創建一個僅在傳遞給它的所有承諾完成後才返回的新承諾。這將使我們能夠訪問一個數組，其中包含有關每個諾言的一些數據。

Promise.allSettled([
  Promise.reject({ code: 500, msg: '服務異常' }),
  Promise.resolve({ code: 200, list: [] }),
  Promise.resolve({ code: 200, list: [] })
]).then(res => {
  console.log(res)
  /*
        0: {status: "rejected", reason: {…}}
        1: {status: "fulfilled", value: {…}}
        2: {status: "fulfilled", value: {…}}
    */
  // 過濾掉 rejected 狀態，儘可能多的保證頁面區域數據渲染
  RenderContent(
    res.filter(el => {
      return el.status !== 'rejected'
    })
  )
})

	Promise.allSettled跟Promise.all類似, 其參數接受一個Promise的數組, 返回一個新的Promise, 唯一的不同在於, 它不會進行短路。
	也就是說當Promise全部處理完成後,我們可以拿到每個Promise的狀態, 而不管是否處理成功。

3.空位合併運算符 ??

	由於JavaScript是動態類型的，因此在分配變量時，需要牢記JavaScript對真實/錯誤值的處理。	
	如果我們有一個帶有某些值的對象，有時我們希望允許使用在技術上是虛假的值，例如空字符串或數字0。設置默認值很快會很煩人，因爲它將覆蓋應爲有效值的內容

let person = {
  profile: {
    name: "",
    age: 0
  }
};

console.log(person.profile.name || "Anonymous"); // Anonymous
console.log(person.profile.age || 18); // 18

代替雙管道，我們可以使用雙問號運算符將類型更嚴格一些，僅當值爲null或undefined時才允許使用默認值。

console.log(person.profile.name ?? "Anonymous"); // ""
console.log(person.profile.age ?? 18); // 0

4.可選鏈接運算符?.

可選鏈運算符 可讓我們在查詢具有多個層級的對象時，不再需要進行冗餘的各種前置校驗。

日常開發中，當需要訪問嵌套在對象內部好幾層的屬性時，可能就會得到這種的錯誤
Uncaught TypeError: Cannot read property...，
這種錯誤，讓整段程序運行中止。

就要修改你的代碼來處理來處理屬性鏈中每一個可能的undefined對象

let nestedProp = obj && obj.first && obj.first.second;

可選鏈式調用 ，可以大量簡化類似繁瑣的前置校驗操作，而且更安全

let nestedProp = obj?.first?.second;

如果obj或obj.first是null/undefined，表達式將會短路計算直接返回undefined

5.BigInt

JavaScript可以處理的最大數字是2 ^ 53，我們可以通過看到MAX_SAFE_INTEGER。

const max = Number.MAX_SAFE_INTEGER;

console.log(max); // 9007199254740991

超過此限制，一切開始變得有點奇怪

console.log(max + 1); // 9007199254740992
console.log(max + 2); // 9007199254740992
console.log(max + 3); // 9007199254740994
console.log(Math.pow(2, 53) == Math.pow(2, 53) + 1); // true

	可以使用新的BigInt數據類型解決此問題。通過n在末尾加上字母“ ”，我們可以開始使用大量數字並與之交互。
	我們無法將標準數字與BigInt數字混合使用，因此任何數學運算都需要使用BigInts完成。

const bigNum = 100000000000000000000000000000n;

console.log(bigNum * 2n); // 200000000000000000000000000000n

6.動態引入

可以在需要時使用async / await動態導入依賴項。

math.js
const add = (num1, num2) => num1 + num2;

export { add };

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

doMath(4, 2);

7.globalThis

globalThis 是一個全新的標準方法用來獲取全局 this 。：
以往我們這樣獲取：
	全局變量 window：是一個經典的獲取全局對象的方法。但是它在 Node.js 和 Web Workers 中並不能使用
	全局變量 self：通常只在 Web Workers 和瀏覽器中生效。但是它不支持 Node.js。一些人會通過判斷 self 是否存在識別代碼是否運行在 Web Workers 和瀏覽器中
	全局變量 global：只在 Node.js 中生效

過去獲取全局對象，可通過一個全局函數：

// ES10之前的解決方案
const getGlobal = function(){
  if(typeof self !== 'undefined') return self
  if(typeof window !== 'undefined') return window
  if(typeof global !== 'undefined') return global
  throw new Error('unable to locate global object')
}

// ES10內置
globalThis.Array(0,1,2) // [0,1,2]

// 定義一個全局對象v = { value:true } ,ES10用如下方式定義
globalThis.v = { value:true }

	globalThis 目的就是提供一種標準化方式訪問全局對象，有了 globalThis 後，你可以在任意上下文，任意時刻都能獲取到全局對象。
	如果您在瀏覽器上，globalThis將爲window，如果您在Node上，globalThis則將爲global。因此，不再需要考慮不同的環境問題。

// worker.js
globalThis === self
// node.js
globalThis === global
// browser.js
globalThis === window

	Object.prototype 必須在全局對象的原型鏈中。下面的代碼在最新瀏覽器中已經會返回 true 了：

Object.prototype.isPrototypeOf(globalThis); // true