背景

今天又被 QA 找: 這個頁面昨天還好好的, 今天就白屏了, 是不是你代碼有問題啊, 趕緊看看。

上去一看， 找到了原因：

原本 pickup, dropoff 兩個字段沒有數(shù)據(jù)的話， 應(yīng)該返回{}, 結(jié)果現(xiàn)在pickup字段返回了null, 而我們?nèi)≈档臅r候，也沒對這個地方做防御。

list: openApiOrderInfo.pickup.address_list, 

結(jié)果就是：腳本報(bào)錯， 頁面不可用。

解決起來也很簡單， 要么給個默認(rèn)值， 要么使用 ?. 做一層防御。

改完再試一下， 就 OK 了， 頁面恢復(fù)正常。

下面我們就說一下這個 ?.

今天的主要內(nèi)容：

• 什么是可選鏈操作符(?.)
• 如何啟用這個功能
• 可選鏈操作符(?.) 是如何工作的
• Heny發(fā)布的相關(guān)些資料
• 總結(jié)

正文語種

可選鏈操作符(?.)， 大家都很熟悉了，這里再簡單回顧一下。

什么是可選鏈操作符(?.)

可選鏈操作符(?.)允許讀取位于連接對象鏈深處的屬性的值，而不必明確驗(yàn)證鏈中的每個引用是否有效。

比如，思考一個存在嵌套結(jié)構(gòu)的對象 obj。不使用可選鏈的話，查找一個深度嵌套的子屬性時，需要驗(yàn)證之間的引用，例如：

let nestedProp = obj.first && obj.first.second; 

為了避免報(bào)錯，在訪問obj.first.second之前，要保證 obj.first 的值既不是 null，也不是 undefined。

如果只是直接訪問 obj.first.second，而不對 obj.first 進(jìn)行校驗(yàn)，則有可能拋出錯誤。

有了可選鏈操作符(?.)，在訪問 obj.first.second 之前，不再需要明確地校驗(yàn) obj.first 的狀態(tài)，再并用短路計(jì)算獲取最終結(jié)果：

let nestedProp = obj.first?.second; 

這等價于以下表達(dá)式，但實(shí)際上沒有創(chuàng)建臨時變量：

let temp = obj.first; 
let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second); 

?. 操作符的功能類似于 . 鏈?zhǔn)讲僮鞣?，不同之處在于?/p>

在引用為空(nullish) (null 或者 undefined) 的情況下不會引起錯誤，該表達(dá)式短路返回值是: undefined。

與函數(shù)調(diào)用一起使用時，如果給定的函數(shù)不存在，則返回 undefined。

當(dāng)嘗試訪問可能不存在的對象屬性時，使用可選鏈操作符將會使表達(dá)式更短、更簡明。

有兩點(diǎn)需要我們留意：

如果存在一個屬性名且不是函數(shù), 使用 ?. 仍然會產(chǎn)生一個 TypeError 異常 (x.y is not a function).

let result = someInterface.customMethod?.(); 

如果 someInterface 自身是 null 或者 undefined ，異常 TypeError 仍會被拋出。

如果你希望允許 someInterface 也為 null 或者 undefined，那么你需要像這樣寫 someInterface?.customMethod?.()

可選鏈不能用于賦值

let object = {}; 
object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment 

如何啟用這個功能

// install 
npm install --save-dev @babel/plugin-proposal-optional-chaining 
 
// babel config 
{ 
 "plugins": [ 
    "@babel/plugin-proposal-optional-chaining" //可選鏈 
    "@babel/plugin-proposal-nullish-coalescing-operator", //雙問號 
  ] 
} 

可選鏈操作符(?.) 是如何工作的

const a = { 
  b: 1 
}; 
 
console.log(a?.b); 

會被轉(zhuǎn)換成：

const a = { 
  b: 1 
}; 
 
console.log(a === null ? void 0 : a.b); 

如果層級更深， 會創(chuàng)建臨時變量用于記錄：

const a = { 
  b: { 
    c: 1, 
    d: 2, 
  } 
}; 
 
console.log(a?.b?.c) 

會被轉(zhuǎn)換成：

var _a$b; 
 
const a = { 
  b: { 
    c: 1, 
    d: 2 
  } 
}; 
console.log( 
  a === null || a === void 0 
    ? void 0  
    : (_a$b = a.b) === null || _a$b === void 0 
      ? void 0 
      : _a$b.c 
); 

Heny發(fā)布的相關(guān)些資料

Heny 目前是 babel 項(xiàng)目的負(fù)責(zé)人，之前發(fā)過一片介紹當(dāng)前 babel 困境的文章: 知名團(tuán)開源項(xiàng)目存活有多難?被數(shù)百萬人使用的 Babel 陷入財(cái)務(wù)困境

上圖推文鏈接：https://twitter.com/left_pad/status/1136282005170262016

感興趣的可以去看看。

總結(jié)

?. 使用起來是非常方便的, 但如果用的不好， 也會隱藏本應(yīng)該暴露出來的問題。

所以, 使用的時候一定要清楚自己在做什么。

?. 還有個小兄弟叫 空值合并運(yùn)算符(??), 這里就不說了， 去 MDN 看文檔吧。

今天就這么多， 希望對大家有所啟發(fā)。