頁(yè)面白屏了？看看可選鏈操作符(?.)
背景
今天又被 QA 找: 這個(gè)頁(yè)面昨天還好好的, 今天就白屏了, 是不是你代碼有問(wèn)題啊, 趕緊看看。
上去一看， 找到了原因：
原本 pickup, dropoff 兩個(gè)字段沒(méi)有數(shù)據(jù)的話， 應(yīng)該返回{}, 結(jié)果現(xiàn)在pickup字段返回了null, 而我們?nèi)≈档臅r(shí)候，也沒(méi)對(duì)這個(gè)地方做防御。
list: openApiOrderInfo.pickup.address_list,
結(jié)果就是：腳本報(bào)錯(cuò)， 頁(yè)面不可用。
解決起來(lái)也很簡(jiǎn)單， 要么給個(gè)默認(rèn)值， 要么使用 ?. 做一層防御。
改完再試一下， 就 OK 了， 頁(yè)面恢復(fù)正常。
下面我們就說(shuō)一下這個(gè) ?.
今天的主要內(nèi)容：
什么是可選鏈操作符( ?.)如何啟用這個(gè)功能 可選鏈操作符( ?.) 是如何工作的Heny發(fā)布的相關(guān)些資料總結(jié)
正文語(yǔ)種
可選鏈操作符(?.)， 大家都很熟悉了，這里再簡(jiǎn)單回顧一下。
什么是可選鏈操作符(?.)
可選鏈操作符(?.)允許讀取位于連接對(duì)象鏈深處的屬性的值，而不必明確驗(yàn)證鏈中的每個(gè)引用是否有效。
比如，思考一個(gè)存在嵌套結(jié)構(gòu)的對(duì)象 obj。不使用可選鏈的話，查找一個(gè)深度嵌套的子屬性時(shí)，需要驗(yàn)證之間的引用，例如：
let nestedProp = obj.first && obj.first.second;
為了避免報(bào)錯(cuò)，在訪問(wèn)obj.first.second之前，要保證 obj.first 的值既不是 null，也不是 undefined。
如果只是直接訪問(wèn) obj.first.second，而不對(duì) obj.first 進(jìn)行校驗(yàn)，則有可能拋出錯(cuò)誤。
有了可選鏈操作符（?.），在訪問(wèn) obj.first.second 之前，不再需要明確地校驗(yàn) obj.first 的狀態(tài)，再并用短路計(jì)算獲取最終結(jié)果：
let nestedProp = obj.first?.second;
這等價(jià)于以下表達(dá)式，但實(shí)際上沒(méi)有創(chuàng)建臨時(shí)變量：
let temp = obj.first;
let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);
?. 操作符的功能類似于 . 鏈?zhǔn)讲僮鞣?，不同之處在于?/p>
在引用為空(nullish) (null 或者 undefined) 的情況下不會(huì)引起錯(cuò)誤，該表達(dá)式短路返回值是: undefined。
與函數(shù)調(diào)用一起使用時(shí)，如果給定的函數(shù)不存在，則返回 undefined。
當(dāng)嘗試訪問(wèn)可能不存在的對(duì)象屬性時(shí)，使用可選鏈操作符將會(huì)使表達(dá)式更短、更簡(jiǎn)明。
有兩點(diǎn)需要我們留意：
如果存在一個(gè)屬性名且不是函數(shù), 使用 ?. 仍然會(huì)產(chǎn)生一個(gè) TypeError 異常 (x.y is not a function).
let result = someInterface.customMethod?.();
如果 someInterface 自身是 null 或者 undefined ，異常 TypeError 仍會(huì)被拋出。
如果你希望允許 someInterface 也為 null 或者 undefined，那么你需要像這樣寫 someInterface?.customMethod?.()
可選鏈 不能用于賦值
let object = {};
object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment
如何啟用這個(gè)功能
// install
npm install --save-dev @babel/plugin-proposal-optional-chaining
// babel config
{
"plugins": [
"@babel/plugin-proposal-optional-chaining" //可選鏈
"@babel/plugin-proposal-nullish-coalescing-operator", //雙問(wèn)號(hào)
]
}
可選鏈操作符(?.) 是如何工作的
const a = {
b: 1
};
console.log(a?.b);
會(huì)被轉(zhuǎn)換成：
const a = {
b: 1
};
console.log(a === null ? void 0 : a.b);
如果層級(jí)更深， 會(huì)創(chuàng)建臨時(shí)變量用于記錄：
const a = {
b: {
c: 1,
d: 2,
}
};
console.log(a?.b?.c)
會(huì)被轉(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ā)過(guò)一片介紹當(dāng)前 babel 困境的文章: 知名團(tuán)開(kāi)源項(xiàng)目存活有多難？被數(shù)百萬(wàn)人使用的 Babel 陷入財(cái)務(wù)困境
上圖推文鏈接：https://twitter.com/left_pad/status/1136282005170262016
感興趣的可以去看看。
總結(jié)
?. 使用起來(lái)是非常方便的, 但如果用的不好， 也會(huì)隱藏本應(yīng)該暴露出來(lái)的問(wèn)題。
所以, 使用的時(shí)候一定要清楚自己在做什么。
?. 還有個(gè)小兄弟叫 空值合并運(yùn)算符(??), 這里就不說(shuō)了， 去 MDN 看文檔吧。
今天就這么多， 希望對(duì)大家有所啟發(fā)。
回復(fù)加群，加入技術(shù)交流群