前言
ES2020 是 ECMAScript 對應(yīng) 2020 年的版本盯蝴。這個版本不像 ES6 (ES2015)那樣包含大量新特性陵霉。但也添加了許多有趣且有用的特性相赁。
本文以簡單的代碼示例來介紹 ES2020新特性衷戈。這樣侨拦，你可以很快理解這些新功能粱挡，而不需要多么復(fù)雜的解釋赠幕。
可選鏈操作符（Optional Chaining）
可選鏈 可讓我們在查詢具有多個層級的對象時，不再需要進(jìn)行冗余的各種前置校驗询筏。
日常開發(fā)中榕堰，當(dāng)需要訪問嵌套在對象內(nèi)部好幾層的屬性時，可能就會得到臭名昭著的錯誤Uncaught TypeError: Cannot read property...嫌套，這種錯誤局冰，讓整段程序運行中止。
于是灌危，你就要修改你的代碼來處理來處理屬性鏈中每一個可能的undefined對象康二，比如：
let nestedProp = obj && obj.first && obj.first.second;
在訪問 obj.first.second 之前，要先確認(rèn) obj 和 obj.first 的值非 null(且不是 undefined)勇蝙。
有了可選鏈?zhǔn)秸{(diào)用 沫勿，可以大量簡化類似繁瑣的前置校驗操作，而且更安全：
let nestedProp = obj?.first?.second;
如果obj或obj.first是null/undefined味混，表達(dá)式將會短路計算直接返回undefined产雹。
可選鏈操作符的支持情況：
空位合并操作符（Nullish coalescing Operator）
當(dāng)我們查詢某個屬性時，經(jīng)常會給沒有該屬性就設(shè)置一個默認(rèn)的值翁锡，比如下面兩種方式：
let c = a ? a : b // 方式1
let c = a || b // 方式2
這兩種方式有個明顯的弊端蔓挖，它都會覆蓋所有的假值，如(0, '', false)馆衔，這些值可能是在某些情況下有效的輸入瘟判。
let x = {
profile: {
name: '浪里行舟',
age: ''
}
}
console.log(x.profile.age || 18) //18
上例中age的屬性為空字符串怨绣，卻被等同為假值，為了解決這個問題拷获，ES2020誕生了個新特性--空位合并操作符篮撑，用 ?? 表示。如果表達(dá)式在??的左側(cè)運算符求值為 undefined 或 null匆瓜，就返回其右側(cè)默認(rèn)值赢笨。
let c = a ?? b;
// 等價于let c = a !== undefined && a !== null ? a : b;
例如有以下代碼：
const x = null;
const y = x ?? 500;
console.log(y); // 500
const n = 0
const m = n ?? 9000;
console.log(m) // 0
空位合并操作符的支持情況：
Promise.allSettled
我們知道 Promise.all 具有并發(fā)執(zhí)行異步任務(wù)的能力。但它的最大問題就是如果參數(shù)中的任何一個promise為reject的話驮吱，則整個Promise.all 調(diào)用會立即終止茧妒，并返回一個reject的新的 Promise 對象。
const promises = [
Promise.resolve(1),
Promise.resolve(2),
Promise.reject('error')
];
Promise.all(promises)
.then(responses => console.log(responses))
.catch(e => console.log(e)) // "error"
假如有這樣的場景：一個頁面有三個區(qū)域左冬，分別對應(yīng)三個獨立的接口數(shù)據(jù)嘶伟，使用 Promise.all 來并發(fā)請求三個接口，如果其中任意一個接口出現(xiàn)異常又碌，狀態(tài)是reject,這會導(dǎo)致頁面中該三個區(qū)域數(shù)據(jù)全都無法出來九昧，這個狀況我們是無法接受，Promise.allSettled的出現(xiàn)就可以解決這個痛點：
Promise.allSettled([
Promise.reject({ code: 500, msg: '服務(wù)異常' }),
Promise.resolve({ code: 200, list: [] }),
Promise.resolve({ code: 200, list: [] })
]).then(res => {
console.log(res)
/*
0: {status: "rejected", reason: {…}}
1: {status: "fulfilled", value: {…}}
2: {status: "fulfilled", value: {…}}
*/
// 過濾掉 rejected 狀態(tài)毕匀，盡可能多的保證頁面區(qū)域數(shù)據(jù)渲染
RenderContent(
res.filter(el => {
return el.status !== 'rejected'
})
)
})
Promise.allSettled跟Promise.all類似, 其參數(shù)接受一個Promise的數(shù)組, 返回一個新的Promise, 唯一的不同在于, 它不會進(jìn)行短路, 也就是說當(dāng)Promise全部處理完成后,我們可以拿到每個Promise的狀態(tài), 而不管是否處理成功铸鹰。
Promise.allSettled的支持情況：
String.prototype.matchAll
如果一個正則表達(dá)式在字符串里面有多個匹配，現(xiàn)在一般使用g修飾符或y修飾符皂岔，在循環(huán)里面逐一取出蹋笼。
function collectGroup1 (regExp, str) {
const matches = []
while (true) {
const match = regExp.exec(str)
if (match === null) break
matches.push(match[1])
}
return matches
}
console.log(collectGroup1(/"([^"]*)"/g, `"foo" and "bar" and "baz"`))
// [ 'foo', 'bar', 'baz' ]
值得注意的是，如果沒有修飾符 /g, .exec() 只返回第一個匹配≡甓猓現(xiàn)在通過String.prototype.matchAll方法剖毯，可以一次性取出所有匹配曙旭。
function collectGroup1 (regExp, str) {
let results = []
for (const match of str.matchAll(regExp)) {
results.push(match[1])
}
return results
}
console.log(collectGroup1(/"([^"]*)"/g, `"foo" and "bar" and "baz"`))
// ["foo", "bar", "baz"]
上面代碼中蘑拯，由于string.matchAll(regex)返回的是遍歷器嚎朽，所以可以用for...of循環(huán)取出蛾找。
String.prototype.matchAll的支持情況：
Dynamic import
現(xiàn)在前端打包資源越來越大，前端應(yīng)用初始化時根本不需要全部加載這些邏輯資源雷激，為了首屏渲染速度更快璧疗，很多時候都是動態(tài)導(dǎo)入（按需加載）模塊皆的，比如懶加載圖片等悲敷，這樣可以幫助您提高應(yīng)用程序的性能究恤。
其中按需加載這些邏輯資源都一般會在某一個事件回調(diào)中去執(zhí)行：
el.onclick = () => {
import('/modules/my-module.js')
.then(module => {
// Do something with the module.
})
.catch(err => {
// load error;
})
}
import()可以用于script腳本中,import(module) 函數(shù)可以在任何地方調(diào)用。它返回一個解析為模塊對象的 promise后德。
這種使用方式也支持 await 關(guān)鍵字部宿。
let module = await import('/modules/my-module.js');
通過動態(tài)導(dǎo)入代碼，您可以減少應(yīng)用程序加載所需的時間瓢湃，并盡可能快地將某些內(nèi)容返回給用戶理张。
Dynamic import的支持情況：
BigInt
javascript 在 Math 上一直很糟糕的原因之一是只能安全的表示-(2^53-1)至 2^53-1 范的值赫蛇，即Number.MIN_SAFE_INTEGER 至Number.MAX_SAFE_INTEGER，超出這個范圍的整數(shù)計算或者表示會丟失精度涯穷。
var num = Number.MAX_SAFE_INTEGER; // -> 9007199254740991
num = num + 1; // -> 9007199254740992
// 再次加 +1 后無法正常運算
num = num + 1; // -> 9007199254740992
// 兩個不同的值棍掐，卻返回了true
9007199254740992 === 9007199254740993 // -> true
于是 BigInt 應(yīng)運而生藏雏，它是第7個原始類型拷况，可安全地進(jìn)行大數(shù)整型計算。
你可以在BigInt上使用與普通數(shù)字相同的運算符掘殴，例如 +, -, /, *, %等等赚瘦。
創(chuàng)建 BigInt 類型的值也非常簡單，只需要在數(shù)字后面加上 n 即可奏寨。例如起意，123 變?yōu)?123n。也可以使用全局方法 BigInt(value) 轉(zhuǎn)化病瞳，入?yún)?value 為數(shù)字或數(shù)字字符串揽咕。
const aNumber = 111;
const aBigInt = BigInt(aNumber);
aBigInt === 111n // true
typeof aBigInt === 'bigint' // true
typeof 111 // "number"
typeof 111n // "bigint"
只要在數(shù)字末尾加上 n，就可以正確計算大數(shù)了：
1234567890123456789n * 123n;
// -> 151851850485185185047n
不過有一個問題套菜，在大多數(shù)操作中亲善，不能將 BigInt與Number混合使用。比較Number和 BigInt是可以的逗柴，但是不能把它們相加蛹头。
1n < 2
// true
1n + 2
// Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions
BigInt的支持情況：
globalThis
globalThis 是一個全新的標(biāo)準(zhǔn)方法用來獲取全局 this 。之前開發(fā)者會通過如下的一些方法獲认纺纭：
- 全局變量 window：是一個經(jīng)典的獲取全局對象的方法渣蜗。但是它在 Node.js 和 Web Workers 中并不能使用
- 全局變量 self：通常只在 Web Workers 和瀏覽器中生效。但是它不支持 Node.js旷祸。一些人會通過判斷 self 是否存在識別代碼是否運行在 Web Workers 和瀏覽器中
- 全局變量 global：只在 Node.js 中生效
過去獲取全局對象耕拷，可通過一個全局函數(shù)：
// ES10之前的解決方案
const getGlobal = function(){
if(typeof self !== 'undefined') return self
if(typeof window !== 'undefined') return window
if(typeof global !== 'undefined') return global
throw new Error('unable to locate global object')
}
// ES10內(nèi)置
globalThis.Array(0,1,2) // [0,1,2]
// 定義一個全局對象v = { value:true } ,ES10用如下方式定義
globalThis.v = { value:true }
而 globalThis 目的就是提供一種標(biāo)準(zhǔn)化方式訪問全局對象，有了 globalThis 后托享，你可以在任意上下文斑胜，任意時刻都能獲取到全局對象。
如果您在瀏覽器上嫌吠，globalThis將為window止潘，如果您在Node上，globalThis則將為global辫诅。因此凭戴，不再需要考慮不同的環(huán)境問題。
// worker.js
globalThis === self
// node.js
globalThis === global
// browser.js
globalThis === window
新提案也規(guī)定了炕矮，Object.prototype 必須在全局對象的原型鏈中么夫。下面的代碼在最新瀏覽器中已經(jīng)會返回 true 了：
Object.prototype.isPrototypeOf(globalThis); // true
globalThis的支持情況：
