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 都能拿到其顶层对象
