ES2020的這些新功能令人期待

const user = }}

}}}if(user && user.address)

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.prop102.po);

//error

如上所示，在訪問屬性前，你必須檢查所訪問層級中的屬性是否存在，以防止出現cannot read property 『po』 of undefined錯誤。而隨著巢狀級別的增加，你手動檢查的屬性數量也將隨之增加。這意味著一旦我們漏過一項，將會在程式中引發undefined或null物件錯誤，導致應用出現問題。

可選鏈結功能出現後

而隨著可選鏈結功能的出現，我們的工作將會變得比較輕鬆，通過使用可選鏈結運算子「?.」我們可以訪問深度巢狀的物件，而不必檢查其是否未定義或null物件。

讓我們看看它是如何使用的：

const user = }}

}}}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) =>

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) =>

getuserdarkmodepreference(darkmodepreference1)

// true

getuserdarkmodepreference(darkmodepreference2)

// false

getuserdarkmodepreference(darkmodepreference3)

// true

getuserdarkmodepreference(darkmodepreference4)

// true

這裡的邏輯是，如果變數darkmodepreference包含乙個空值，那麼就把true賦給它，使用這個特性的**簡單易懂。

動態匯入

此功能將幫助你的應用更高效地執行。動態匯入允許你實時地在應用中以模組的形式按需匯入js檔案。在es2020之前，無論你是否使用了該模組，都應該提前匯入它。

讓我們看看如何在動態匯入之前和之後如何實現這一點有什麼異同。

import 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』, () => )

.catch(err => )

})如上面的**中所看到的那樣，現在可以按需載入所使用的模組，從而減少應用的開銷和頁面載入時間。

這可能不是你想要的。如果你的需求是不關心它們的結果，只需將它們全部執行，你可以使用新的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

1const promisearray = [

promise.resolve(100),

promise.reject(null),

promise.resolve(「data release」),

promise.reject(new error(『something went wrong』))];

promise.allsettled(promisearray).then(res =>).catch(err => console.log(err));

//[//,

//,//,

////]

深圳**建設www.sz886.com

ES2020的這些新功能令人期待

ES2020的js新特性

ES2020新語法空值合併運算子

2020新的起點

ES2020的這些新功能令人期待

ES2020的js新特性

ES2020新語法 空值合併運算子

2020新的起點

相關推薦

ES2020新語法空值合併運算子