JS?可選鏈的三種形勢及好處詳解
引言
JS的一些特性極大地改變了咱們的編碼方式。從ES6年開始，對咱們代碼影響最大的特性的解 、箭頭函數(shù)、類和模塊系統(tǒng)。
到2019年8月，一個新的可選鏈提案已經(jīng)進入第三階段，這是一個很好的改進?？蛇x鏈接改變了從深層對象結構訪問屬性的方式。
來看看這是又是什么騷操作。
問題
由于JS的動態(tài)特性，對象可以具有多層不同的嵌套對象結構。
通常，當咱們處理以下這些對象時：
- 獲取遠程JSON數(shù)據(jù)
- 使用配置對象
- 有可選屬性
雖然JS為對象支持不同層次數(shù)據(jù)結構，但是在訪問此類對象的屬性時，復雜性也隨著增加。
1.bigObject可以在運行時擁有不同的屬性集
// 嵌套版本
const bigObject = {
// ...
prop1: {
//...
prop2: {
// ...
value: 'Some value'
}
}
};
// 簡單版本
const bigObject = {
// ...
prop1: {
// Nothing here
}
};因此，必須手動檢查屬性是否存在
if (bigObject &&
bigObject.prop1 != null &&
bigObject.prop1.prop2 != null) {
let result = bigObject.prop1.prop2.value;
}這樣寫太過冗長了，最好避免寫它。
咱們來看看可選鏈如何解決這個問題，以減少冗余的代碼。
2. 易于深入訪問屬性
設計一個保存電影信息的對象。 該對象包含必填title屬性，以及可選的director和actors。
movieSmall對象僅包含title，而movieFull包含完整的屬性集：
const movieSmall = {
title: 'Heat'
};
const movieFull = {
title: 'Blade Runner',
director: { name: 'Ridley Scott' },
actors: [{ name: 'Harrison Ford' }, { name: 'Rutger Hauer' }]
};寫一個獲取director的函數(shù)。 請記住，director 可能不存在。
function getDirector(movie) {
if (movie.director != null) {
return movie.director.name;
}
}
getDirector(movieSmall); // => undefined
getDirector(movieFull); // => 'Ridley Scott'if（movie.director）{...}條件用于驗證是否定義了director屬性。 如果沒有這個預防措施，在訪問movieSmall對象的director時，JS會拋出TypeError: Cannot read property 'name' of undefined。
這種場景最適合使用可選鏈的功能了，如下所示，代碼將簡潔很多。
function getDirector(movie) {
return movie.director?.name;
}
getDirector(movieSmall); // => undefined
getDirector(movieFull); // => 'Ridley Scott'在movie.director?.name表達式中可以找到?.可選的鏈接操作符。
在movieSmall中，沒有director屬性。 因此，movie.director？.name的的結果為undefined。 可選鏈運算符可防止拋出 TypeError: Cannot read property 'name' of undefined。
簡單地說，代碼片段：
let name = movie.director?.name;
等價于
let name;
if (movie.director != null) {
name = movie.director.name;
}?.通過減少兩行代碼簡化getDirector()函數(shù)，這就是為什么我喜歡可選鏈的原因。
2.1 數(shù)組項
可選的鏈功能可以做得更多。可以自由地在同一個表達式中使用多個可選的鏈接操作符，甚至可以使用它安全地訪問數(shù)組項。
下一個任務是編寫一個函數(shù)，返回電影的actors中的name。
在movie對象中，actors數(shù)組可以是空的，甚至是缺失的，因此必須添加額外的條件來判空。
function getLeadingActor(movie) {
if (movie.actors && movie.actors.length > 0) {
return movie.actors[0].name;
}
}
getLeadingActor(movieSmall); // => undefined
getLeadingActor(movieFull); // => 'Harrison Ford'if (movie.actors && movies.actors.length > 0) {...}條件主要判斷movie包含actors屬性，并且此屬性至少有一個actor。
使用可選鏈接，同樣代碼也簡潔了很了，如下：
function getLeadingActor(movie) {
return movie.actors?.[0]?.name;
}
getLeadingActor(movieSmall); // => undefined
getLeadingActor(movieFull); // => 'Harrison Ford'actors?. 確保actors屬性存在, [0]?.確保列表中存在第一個actor。
3.雙問號操作符
一個名為nullish coalescing operator的新提議？ 處理undefined或null，將它們默認為特定值。
表達式變量?? 如果變量undefined或為null，則默認值為指定的值。
const noValue = undefined; const value = 'Hello'; noValue ?? 'Nothing'; // => 'Nothing' value ?? 'Nothing'; // => 'Hello'
接著使用??來優(yōu)化一下 getLeading()函數(shù)，當movie對象中沒有actor時返回“Unknown actor”
function getLeadingActor(movie) {
return movie.actors?.[0]?.name ?? 'Unknown actor';
}
getLeadingActor(movieSmall); // => 'Unknown actor'
getLeadingActor(movieFull); // => 'Harrison Ford'4. 可選鏈的三種形式
咱們可以使用以下3種形式的可選鏈。
第一種： object?.property 用于訪問靜態(tài)屬性：
const object = null; object?.property; // => undefined
第二種：object?.[expression] 用于訪問動態(tài)屬性或數(shù)組項：
// 其一 const object = null; const name = 'property'; object?.[name]; // => undefined // 其二 const array = null; array?.[0]; // => undefined
第三種:object?.([arg1, [arg2, ...]]) 執(zhí)行一個對象方法
const object = null;
object?.method('Some value'); // => undefined將這三種組合起來創(chuàng)建一個可選鏈：
const value = object.maybeUndefinedProp?.maybeNull()?.[propName];
5.短路：遇到 null/undefined 停止
可選鏈接運算符的有趣之處在于，只要在左側leftHandSide？.rightHandSide遇到無效值，右側訪問就會停止，這稱為短路。
看看例子：
const nothing = null; let index = 0; nothing?.[index++]; // => undefined index; // => 0
6. 何時使用可選鏈
不要急于使用可選的鏈操作符來訪問任何類型的屬性:這會導致錯誤的使用。
6.1訪問潛在無效的屬性
?.一般使用在可能為空的屬性:maybeNullish?.prop。在確定屬性不為空的情況下，使用屬性訪問器:.property或[propExpression]。
// 好
function logMovie(movie) {
console.log(movie.director?.name);
console.log(movie.title);
}
// 不好
function logMovie(movie) {
// director needs optional chaining
console.log(movie.director.name);
// movie doesn't need optional chaining
console.log(movie?.title);
}6.2 通常有更好的選擇
以下函數(shù)hasPadding()接收可選padding屬性的樣式對象。 padding具有left，top，right，bottom可選屬性。
嘗試使用可選的鏈操作符:
function hasPadding({ padding }) {
const top = padding?.top ?? 0;
const right = padding?.right ?? 0;
const bottom = padding?.bottom ?? 0;
const left = padding?.left ?? 0;
return left + top + right + bottom !== 0;
}
hasPadding({ color: 'black' }); // => false
hasPadding({ padding: { left: 0 } }); // => false
hasPadding({ padding: { right: 10 }}); // => true雖然函數(shù)正確地確定了元素是否有padding，但是對于每個屬性使用可選的鏈有點過于麻煩了。
更好的方法是使用對象擴展操作符將padding對象默認為零值
function hasPadding({ padding }) {
const p = {
top: 0,
right: 0,
bottom: 0,
left: 0,
...padding
};
return p.top + p.left + p.right + p.bottom !== 0;
}
hasPadding({ color: 'black' }); // => false
hasPadding({ padding: { left: 0 } }); // => false
hasPadding({ padding: { right: 10 }}); // => true這個就比可選鏈來的更簡潔。
代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進行l(wèi)og 調(diào)試，這邊順便給大家推薦一個好用的BUG監(jiān)控工具 Fundebug。
原文：https://dmitripavlutin.com/ja...
以上就是JS 可選鏈的三種形勢及好處詳解的詳細內(nèi)容，更多關于JS 可選鏈三種形勢的資料請關注腳本之家其它相關文章！
相關文章
Webpack?5的新特性和改進為前端開發(fā)者提供了更強大、更高效的構建工具,通過內(nèi)置的持久性緩存插件、優(yōu)化的默認配置、Webpack?CLI的改進等,Webpack?5使得構建過程更加簡化,性能更加優(yōu)越2024-05-05
Jjcarousellite 實現(xiàn)圖片列表滾動的簡單實例
這篇文章主要介紹了Jjcarousellite 實現(xiàn)圖片列表滾動的簡單實例，有需要的朋友可以參考一下2013-11-11
網(wǎng)站開發(fā)時經(jīng)常需要在某個頁面需要實現(xiàn)對大量圖片的瀏覽;用javascript來實現(xiàn)一個圖片瀏覽器，讓用戶無需等待過長的時間就能看到其他圖片2012-12-12
這篇文章主要介紹了JS實現(xiàn)簡單路由器功能的方法,基于javascript模擬簡單路由編碼的相關技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了uni-app中使用renderjs的詳細步驟,RenderJS是一種可以直接運行在視圖層（webview）中的JavaScript技術,用于優(yōu)化大量DOM操作的性能,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了JS基礎之邏輯結構與循環(huán)操作,結合實例形式分析了JavaScript邏輯判斷、流程控制、循環(huán)語句等相關操作技巧,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了element-ui 圖片壓縮上傳功能實現(xiàn),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-10-10
這篇文章主要介紹了微信接入之獲取用戶頭像的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要介紹了echarts學習之如何給餅圖中間添加文字問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要給大家介紹了關于echarts柱狀圖點擊事件的相關資料,在實際的項目開發(fā)中我們通常會用到Echarts來對數(shù)據(jù)進行展示,有時候需要用到Echarts的點擊事件,增加系統(tǒng)的交互,需要的朋友可以參考下2023-09-09