ES11 也就是ECMAScript2020版本, 是相對(duì)于2020 的ES新版本的特性更新,本文介紹ES11的概念和使用方法.
總覽
- class類的私有變量 #
- Promise.allSettled
- String.prototype.matchAll
- BigInt
- 空值合并運(yùn)算符??
- 可選鏈?zhǔn)皆扑惴?.
- 按需獲取動(dòng)態(tài)import
- globalThis
注意: 當(dāng)前所有新特性都在chrome 83.0版本進(jìn)行測(cè)試
1. class類的私有變量
在ES11 之前js是沒(méi)有class類的私有變量的概念, 我們程序員一般使用 '_' 開(kāi)始符號(hào)代表了私有變量,列如 _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以來(lái), Promise支持的組合型傳入類型的方法只有: promise.all 和promise.race , 而這兩種方法都會(huì)因?yàn)?當(dāng)promise被reject或者報(bào)錯(cuò)的時(shí)候發(fā)生短路,導(dǎo)致之后的promise不會(huì)執(zhí)行. 引入了Promise.allSettled之后,無(wú)論promise數(shù)組中任何一個(gè)promise狀態(tài)是reslove還是reject,都會(huì)執(zhí)行完畢,最后返回一個(gè)狀態(tài)數(shù)組.
_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
語(yǔ)法: str.machAll(reg)
給定一個(gè)字符串和一個(gè)正則表達(dá)式,machAll可以返回所有的與該字符串匹配正則結(jié)果的迭代器.下面是mach() 和 machAll() 的對(duì)比
* 注意: Reg正則必須是設(shè)置了全局模式g的形式，否則會(huì)拋出異常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 任意精度的整數(shù)
JavaScript對(duì)數(shù)字大小有嚴(yán)格的固定限制范圍, 當(dāng)大于2的53次方的時(shí)候精度就會(huì)消失,舉個(gè)簡(jiǎn)單的例子:
console.log(2**53) // 9007199254740992
console.log(2**53 === 2**53 + 1) // true
Biglnt是一種新的數(shù)據(jù)類型,所以現(xiàn)在js有八種數(shù)據(jù)類型了 分別是:
- number
- string
- bool
- null
- undefined
- symbol
- object
- bigInt
BigInt 產(chǎn)生原因是為了解決js中超過(guò)2**53 - 1 的整數(shù)精度失效問(wèn)題. 要?jiǎng)?chuàng)建BigInt只需要在數(shù)字的末尾加上一個(gè) '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 類型無(wú)法跟Number類型互相運(yùn)算.
5. 空值合并運(yùn)算符??
對(duì)TypeScript了解的人,大概很早就開(kāi)始使用??號(hào)符號(hào). 在ES11 新特性之后,?? 號(hào)符號(hào)可以在我們直接書(shū)寫(xiě)js時(shí)候使用.
當(dāng)我們要判斷某個(gè)對(duì)象的屬性不存在那么就取另外一個(gè)對(duì)象的時(shí)候,列如以下情況:
const obj = {
a: 1,
b: 0
}
console.log(obj.a || 3) // 1
console.log(obj.b || 3) // 3
如果我們只是想判斷obj對(duì)象中有那個(gè)屬性然后取值屬性值,沒(méi)有的話就取值為3 ,這里就會(huì)需要多余的判斷.
為了避免這種運(yùn)算,我們使用?? 運(yùn)算符
console.log(obj.a ?? 3) // 1
console.log(obj.b ?? 3) // 0
解析: 空值運(yùn)算符檢查所有值的屬性是否為undefined或null譬淳。如果不是null或undefined，它將返回初始值，否則將返回??后面的值解寝。
6. 可選鏈?zhǔn)剿惴ǚ?.
同樣TypeScript 也已經(jīng)有了這個(gè)運(yùn)算符,當(dāng)我們有如下一個(gè)對(duì)象:
const user = {
info:{
age: 11
}
}
要取值:
console.log(user.info.age) // 11
當(dāng)無(wú)法判斷user對(duì)象中是否有info的屬性,info屬性下面是否有age屬性我們會(huì):
console.log(user&&user.info&&user.info.age)
而有了?. 運(yùn)算符之后 可以如此
console.log(user?.info?.age)
如果一個(gè)對(duì)象的屬性不存在,那么就會(huì)直接返回undefined,而不用像之前的一樣進(jìn)行多次的判斷.
7. 按需獲取動(dòng)態(tài)import
眾所周知,ES Module是一種靜態(tài)加載模塊,靜態(tài)體現(xiàn)在如下信息:
- 靜態(tài)模塊: import/export聲明只能出現(xiàn)在頂層作用域驼仪，不支持按需加載、懶加載
- 靜態(tài)標(biāo)識(shí): 模塊標(biāo)識(shí)只能是字符串字面量珊楼，不支持運(yùn)行時(shí)動(dòng)態(tài)計(jì)算而來(lái)的模塊名
嚴(yán)格的靜態(tài)加載,有益于基于源碼的靜態(tài)分析,編譯優(yōu)化,但也同時(shí)存在以下的問(wèn)題:
- 首屏需要加載所有import引入的模塊,不利于首屏優(yōu)化
- 模塊較多的時(shí)候難以確定每個(gè)模塊加載的含義
- 僅在特殊情況下需要加載的模塊,首次就直接加載影響性能優(yōu)化.
針對(duì)于此, ES11 添加新特性 獲取動(dòng)態(tài)import:
import(specifier)
import函數(shù)傳入?yún)?shù)模塊標(biāo)識(shí)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 在語(yǔ)言標(biāo)準(zhǔn)的層面通殃，引入
globalThis作為頂層對(duì)象。也就是說(shuō)厕宗，任何環(huán)境下画舌，globalThis都是存在的，都可以從它拿到頂層對(duì)象已慢，指向全局環(huán)境下的this曲聂。
列如:
- 在瀏覽器中它是 window
- 在 worker 中它是 self
- 在 Node.js 中它是global
......
所以在ES11之后在任何情況下使用globalThis 都能拿到其頂層對(duì)象
