轉載請注明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文出處：https://blog.bitsrc.io/es2020-has-been-finalized-here-is-what-im-excited-about-414959bc2f7f
最近這幾年，隨着JavaScript及前端領域的持續迅猛發展，尤其是在2015年ES6發布后，這個發展的進程也變得越來越快起來。許多新功能也將計划包含在ES2020版本中。
前段時間，我們得到了關於ES2020已經基本定稿的功能列表，這個功能列表可以說大部分都會出現在ES2020新版本發布列表中。而在這其中的部分功能我認為將備受期待，因為作為一個開發者，在這些功能違背發布之前，在編碼時遇到一些難題需要我們自己去解決。那么，讓我們看看這些功能都是什么吧。
可選鏈接
就我個人而言，我認為這是ES2020最令人期待的功能之一，這個功能使你可以安全地訪問對象的深層嵌套屬性，而不必檢查每個屬性是否存在。那么，Talk is cheap. Show me the code，讓我們看看實際在代碼層面有什么改變吧。
在使用可選鏈接之前的代碼：
const user = {
firstName:"Joseph",
lastName:"Kuruvilla",
age:38,
address:{
number:"239",
street:"Ludwig Lane",
city:"Chennai",
zip:"600028",
prop1:{
prop2:{
prop3:{
prop4:{
value:'sample'
}
}
}
}
}
}
if(user && user.address){
console.log(user.address.zip); //600028
}
if(user && user.address && user.address.prop1 && user.address.prop1.prop2 && user.address.prop1.prop2.prop3 && user.address.prop1.prop2.prop3.prop4){
console.log(user.address.prop1.prop2.prop3.prop4.value);
}
//訪問不存在的屬性
console.log(user.address.prop102.po);
//Error
如上所示，在訪問屬性前，你必須檢查所訪問層級中的屬性是否存在，以防止出現Cannot read property 'po' of undefined錯誤。而隨着嵌套級別的增加，你手動檢查的屬性數量也將隨之增加。這意味着一旦我們漏過一項，將會在程序中引發undefined或null對象錯誤，導致應用出現問題。
可選鏈接功能出現后
而隨着可選鏈接功能的出現，我們的工作將會變得比較輕松，通過使用可選鏈接運算符“?.”我們可以訪問深度嵌套的對象，而不必檢查其是否未定義或null對象。
讓我們看看它是如何使用的：
const user = {
firstName:"Joseph",
lastName:"Kuruvilla",
age:38,
address:{
number:"239",
street:"Ludwig Lane",
city:"Chennai",
zip:"600028",
prop1:{
prop2:{
prop3:{
prop4:{
value:'sample'
}
}
}
}
}
}console.log(user?.address?.zip);
//600028
console.log(user?.address?.prop1?.prop2?.prop3?.prop4?.value);
//sample
//Accessing unexisting property
console.log(user?.address?.prop102?.po);
//undefined
ES2020通過引入一個 ?. 操作符成功減少了許多代碼。
空值合並（Nullish Coalescing）
當我第一次聽說這個功能時，我認為這是另一個令人值得期待的功能，因為我就曾因為在大量重復手動實現該功能時，非常期待有類似這個功能的出現。
空值合並可以讓你檢查nullish值而不是falsey值。nullish值是指null或undefined，falsey值是指空字符串，數字0， undefined，null，false，NaN，等值。雖然看起來好像這兩個值沒什么區別，但實際上差異卻很大。
在空值合並之前
我最近在做一個項目，其中需要增加暗夜模式的切換功能。我必須檢查輸入是否為 true或者false。如果用戶沒有設置任何值，默認它應該為true。下面是我如何在空值合並出現前實現它的代碼。
const darkModePreference1 = true
const darkModePreference2 = false
const darkModePreference3 = undefined
const darkModePreference4 = null
const getUserDarkModePreference = (darkModePreference) => {
if (darkModePreference || darkModePreference === false) {
return darkModePreference
}
return true
}
getUserDarkModePreference(darkModePreference1)
// true
getUserDarkModePreference(darkModePreference2)
// false
getUserDarkModePreference(darkModePreference3)
// true
getUserDarkModePreference(darkModePreference4)
// true
在空值合並出現后
在使用空值合並后，你所要做的就是使用??操作符。不再需要 if 語句。
const darkModePreference1 = true
const darkModePreference2 = false
const darkModePreference3 = undefined
const darkModePreference4 = null
const getUserDarkModePreference = (darkModePreference) => {
return darkModePreference ?? true;
}
getUserDarkModePreference(darkModePreference1)
// true
getUserDarkModePreference(darkModePreference2)
// false
getUserDarkModePreference(darkModePreference3)
// true
getUserDarkModePreference(darkModePreference4)
// true
這里的邏輯是，如果變量darkModePreference包含一個空值，那么就把true賦給它，使用這個特性的代碼簡單易懂。
動態導入
此功能將幫助你的應用更高效地運行。動態導入允許你實時地在應用中以模塊的形式按需導入JS文件。在ES2020之前，無論你是否使用了該模塊，都應該提前導入它。
例如，假設我們需要添加一個功能來下載一個pdf格式的文件。
讓我們看看如何在動態導入之前和之后如何實現這一點有什么異同。
動態導入之前
在實際項目中，下載pdf的功能不會被所有的網站訪客使用。但是，不管我們的訪問者是否使用它，它都需要導入。這意味着這個pdf模塊也會在頁面加載時被載入。
import { exportAsPdf } from './export-as-pdf.js'
const exportPdfButton = document.querySelector('.exportPdfBtn');
exportPdfButton.addEventListener('click', exportAsPdf);
這種開銷可以通過使用延遲加載模塊來減少。可以通過代碼分離（code-splitting）來實現，代碼分離已經可以通過webpack或其他模塊打包工具來實現。
但是在ES2020中我們以原生的方式來實現這個功能，不再需要模塊打包工具等其他方式減少開銷了。
動態導入之后
const exportPdfButton = document.querySelector('.exportPdfBtn');
exportPdfButton.addEventListener('click', () => {
import('./export-as-pdf.js')
.then(module => {
module.exportAsPdf()
})
.catch(err => {
// handle the error if the module fails to load
})
})
如上面的代碼中所看到的那樣，現在可以按需加載所使用的模塊，從而減少應用的開銷和頁面加載時間。
Promise.allSettled
如果你有這樣一個場景，一旦所有的promise都完成了，就必須執行一個任務，你會使用Promise.all()方法。這個方法有一個缺點。當任何一個promise被拒絕時，都會拋出一個錯誤。這意味着你的代碼不會等到你所有的promise都完成。
這可能不是你想要的。如果你的需求是不關心它們的結果，只需將它們全部運行，你可以使用新的Promise.allSettled()方法。這種方法只有在你所有的promise都執行完成之后才會調用。
使用 promise.all
const PromiseArray = [
Promise.resolve(100),
Promise.reject(null),
Promise.resolve("Data release"),
Promise.reject(new Error('Something went wrong'))];
Promise.all(PromiseArray)
.then(data => console.log('all resolved! here are the resolve values:', data))
.catch(err => console.log('got rejected! reason:', err))
//got rejected! reason: null
如上面的代碼，當一個promise失敗時，會引發錯誤。
使用 promise.allSettled
const PromiseArray = [
Promise.resolve(100),
Promise.reject(null),
Promise.resolve("Data release"),
Promise.reject(new Error('Something went wrong'))];
Promise.allSettled(PromiseArray).then(res =>{
console.log(res);
}).catch(err => console.log(err));
//[
//{status: "fulfilled", value: 100},
//{status: "rejected", reason: null},
//{status: "fulfilled", value: "Data release"},
//{status: "rejected", reason: Error: Something went wrong ...}
//]
即使有些promise被拒絕，Promise.allSettled仍然會在所有promise執行完成后為你返回結果。
其他也很令人期待的功能
BigInt
允許你使用比Javascript中允許的最大值大的數字。這個數字是pow(2，53)-1。不過這並不是向后兼容的，因為傳統的浮點數標准(IEEE 754)不支持這種大小的數字。
String.matchAll
matchAll() 是一個和正則表達式相關的方法。它返回一個包含所有匹配正則表達式的結果及分組捕獲組的迭代器。這個方法添加到了 String 原型里。
globalThis
globalThis是對全局對象的引用，與環境無關。在瀏覽器中，全局對象是window對象。在Node環境中，全局對象是global對象，在web worker中是self。
總結
本文中有些功能是我以個人角度總結梳理的，如果缺少了哪個功能或有我理解有誤的地方，歡迎大家在評論中指出，謝謝！