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

　　

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

　书写不易，转载请标识。