ES11(ES2020)--五分鍾熟悉ES11

ES11規范於今年的年初完成，引入了許多新標准，本文簡單介紹部分新特性，以幫助您可以快速理解新特性。

 

 

私有變量
通過在變量或函數前面添加一個哈希符號#，可以將它們設為私有屬性，只在類內部可用。、

class Test{
    #a= 0
    constructor (para){
      this.#a= para
    }
    getA(){
      return this.#a
    }
}

const test= new Test(1)
let a= test.getA() // 1
console.log(test.#a) //Error : Uncaught SyntaxError: Private field '#a' must be declared in an enclosing class

　　

Promise.allSettled

返回結果里會將返回一個數組，包含了所有成功與失敗的結果，數組每項為對象，均含有status屬性，對應fulfilled和rejected。

//promise.all 如果某個任務reject 其他任務都會掛掉，結果直接進入catch;
//promise.react 返回第一個執行完的promise,無論resolves or rejects

// [{"status":"rejected","reason":"c"},
// {"status":"fulfilled","value":"a"},
// {"status":"fulfilled","value":"b"}]

　　

BigInt

可以在標准JS中執行對大整數的算術運算，不必擔心精度損失風險,創建BigInt數據類型的方式非常簡單，在整數后面追加n即可，或者通過BigInt()進行創建實例

   const bigint = 999999999999999999n

　　const bigintByMethod = BigInt('999999999999999999')

　　

　　

?? 空位合並運算符

處理null和undefined，如果為null或者undefined，即返回右側，否則返回左側

　　和 || 最大的區別就是 ' '和 0，??的左側 為 ' '或者為 0 的時候，依然會返回左側的值；|| 會對左側的數據進行boolean類型轉換，所以' '和 0 會被轉換成false,返回右側的值

undefined || 1 // 1

undefined ?? 1 // 1

2?? 1 // 2

　　

　　

可選鏈運算符 .?
可選鏈運算符在查找嵌套對象時，找到鏈中的第一個undefined或者null后會立即終止，並返回undefined，而不會不斷向下查找而導致拋錯

const a={
　　b:{
　　　　c:1　　
　　}
}

console.log(a.bb.c.d)//Uncaught TypeError: Cannot read property 'c' of undefined

console.log(a.b.c?.d)//undefined

　　

　　

globalThis

//Browser 
globalThis === window //true 

//Webworker 
globalThis === self //true 

//Node 
globalThis === global //true

　　

　　

動態導入
現在可以使用async / await在需要時動態導入依賴項，進行按需加載，這樣可以讓首屏的渲染速度更快

　　let fun=async(num1,num2)=>{
  　 let model=await import('./demo.js');
　　 model.sum(num1,num2)
　　}
　　fun(1,2)//3

　　

-------------------------------------------------------------------------------------

　書寫不易，轉載請標識。