ES11 新特性

ES11 也就是ECMAScript2020版本, 是相对于2020 的ES新版本的特性更新,本文介绍ES11的概念和使用方法.

总览

class类的私有变量 #
Promise.allSettled
String.prototype.matchAll
BigInt
空值合并运算符??
可选链式云算法?.
按需获取动态import
globalThis

注意: 当前所有新特性都在chrome 83.0版本进行测试

1. class类的私有变量

在ES11 之前js是没有class类的私有变量的概念, 我们程序员一般使用 '_' 开始符号代表了私有变量,列如 _name 代表了class类中name属性为私有的,而Typescript使用private 前缀代表私有属性或者方法. ES11 中使用# 代表类中的属性为私有变量.
_code

class Dog {
  #name = 'owen'
  age = 18
  getInfo(){
    console.log(`dog name is ${this.#name} age is ${this.age}`)
  }
}

const dogInstance = new Dog() // dog name is owen age is 18

dogInstance.getInfo()
console.log(dogInstance.#name) // Uncaught SyntaxError: Private field '#name' must be declared in an enclosing class

2. Promise.allSettled

ES6引入Promise以来, Promise支持的组合型传入类型的方法只有: promise.all 和promise.race , 而这两种方法都会因为当promise被reject或者报错的时候发生短路,导致之后的promise不会执行. 引入了Promise.allSettled之后,无论promise数组中任何一个promise状态是reslove还是reject,都会执行完毕,最后返回一个状态数组.
_code

const promise1 = new Promise((reslove,reject)=>{
  setTimeout(()=>{
    reslove('promise success')
  },1000)
})
const promise2 = new Promise((reslove,reject)=>{
  setTimeout(()=>{
    reject('promise fail')
  },1000)
})

const proResult = Promise.allSettled([promise1,promise2]).then(data=> {
  console.log(data)
})
/*
[
  { status: 'fulfilled', value: 'promise success' },
  { status: 'rejected', reason: 'promise fail' }
]
*/

3. String.prototype.matchAll

语法: str.machAll(reg)
给定一个字符串和一个正则表达式,machAll可以返回所有的与该字符串匹配正则结果的迭代器.下面是mach() 和 machAll() 的对比
* 注意: Reg正则必须是设置了全局模式g的形式，否则会抛出异常TypeError。
_code

const reg = /name(\d?)/g
const nameGroup = 'name1name2,name3'
console.log(nameGroup.match(reg))
 // [ 'name1', 'name2', 'name3' ]
console.log(nameGroup.matchAll(reg))
// Object [RegExp String Iterator] {}
console.log(...nameGroup.matchAll(reg))
/*
[
  'name1',
  '1',
  index: 0,
  input: 'name1name2,name3',
  groups: undefined
] [
  'name2',
  '2',
  index: 5,
  input: 'name1name2,name3',
  groups: undefined
] [
  'name3',
  '3',
  index: 11,
  input: 'name1name2,name3',
  groups: undefined
]
*/

4. BigInt 任意精度的整数

JavaScript对数字大小有严格的固定限制范围, 当大于2的53次方的时候精度就会消失,举个简单的例子:

console.log(2**53) // 9007199254740992
console.log(2**53 === 2**53 + 1) // true

Biglnt是一种新的数据类型,所以现在js有八种数据类型了分别是:

number
string
bool
null
undefined
symbol
object
bigInt

BigInt 产生原因是为了解决js中超过2**53 - 1 的整数精度失效问题. 要创建BigInt只需要在数字的末尾加上一个 'n' 即可. 如下示例:
_code

const bigNumber = 900719925474099211n
console.log(bigNumber + 1n) // 900719925474099212n

console.log(bigNumber + 1)
 // TypeError: Cannot mix BigInt and other types, use explicit conversions

* 注意BigInt 类型无法跟Number类型互相运算.

5. 空值合并运算符??

对TypeScript了解的人,大概很早就开始使用??号符号. 在ES11 新特性之后,?? 号符号可以在我们直接书写js时候使用.
当我们要判断某个对象的属性不存在那么就取另外一个对象的时候,列如以下情况:

const obj = {
  a: 1,
  b: 0
}
console.log(obj.a || 3) // 1
console.log(obj.b || 3) // 3

如果我们只是想判断obj对象中有那个属性然后取值属性值,没有的话就取值为3 ,这里就会需要多余的判断.
为了避免这种运算,我们使用?? 运算符

console.log(obj.a ?? 3) // 1
console.log(obj.b ?? 3) // 0

解析: 空值运算符检查所有值的属性是否为undefined或null。如果不是null或undefined，它将返回初始值，否则将返回??后面的值。

6. 可选链式算法符?.

同样TypeScript 也已经有了这个运算符,当我们有如下一个对象:

const user = {
  info:{
    age: 11
  }
}

要取值:

console.log(user.info.age) // 11

当无法判断user对象中是否有info的属性,info属性下面是否有age属性我们会:

console.log(user&&user.info&&user.info.age)

而有了?. 运算符之后可以如此

console.log(user?.info?.age)

如果一个对象的属性不存在,那么就会直接返回undefined,而不用像之前的一样进行多次的判断.

7. 按需获取动态import

众所周知,ES Module是一种静态加载模块,静态体现在如下信息:

静态模块: import/export声明只能出现在顶层作用域，不支持按需加载、懒加载
静态标识: 模块标识只能是字符串字面量，不支持运行时动态计算而来的模块名

严格的静态加载,有益于基于源码的静态分析,编译优化,但也同时存在以下的问题:

首屏需要加载所有import引入的模块,不利于首屏优化
模块较多的时候难以确定每个模块加载的含义
仅在特殊情况下需要加载的模块,首次就直接加载影响性能优化.

针对于此, ES11 添加新特性获取动态import:

import(specifier)

import函数传入参数模块标识specifier ,返回promise,列如以下示例:

// lib.js
function add(a, b) {
return a + b
}
exports.add = add
exports.test = 1
// main.js
const loadAdd = () => {
  import('./lib.js').then(res=>{
    console.log(res.default.add) // [Function: add]
    console.log(res.default.test) // 1
  })
}
loadAdd()

8. globalThis

ES11 在语言标准的层面，引入globalThis作为顶层对象。也就是说，任何环境下，globalThis都是存在的，都可以从它拿到顶层对象，指向全局环境下的this。

列如:

在浏览器中它是 window
在 worker 中它是 self
在 Node.js 中它是global
......
所以在ES11之后在任何情况下使用globalThis 都能拿到其顶层对象

参考文档

ECMAScript 2020或ES11
ES2020（ES11）中的JavaScript新功能