背景
今天又被 QA 找: 這個頁面昨天還好好的, 今天就白屏了, 是不是你代碼有問題啊, 趕緊看看。
上去一看， 找到了原因：
原本 pickup, dropoff 兩個字段沒有數據的話， 應該返回{}, 結果現在pickup字段返回了null, 而我們取值的時候，也沒對這個地方做防御。
- list: openApiOrderInfo.pickup.address_list,
結果就是：腳本報錯， 頁面不可用。
解決起來也很簡單， 要么給個默認值， 要么使用 ?. 做一層防御。
改完再試一下， 就 OK 了， 頁面恢復正常。
下面我們就說一下這個 ?.
今天的主要內容：
- 什么是可選鏈操作符(?.)
- 如何啟用這個功能
- 可選鏈操作符(?.) 是如何工作的
- Heny發布的相關些資料
- 總結
正文語種
可選鏈操作符(?.)， 大家都很熟悉了，這里再簡單回顧一下。
什么是可選鏈操作符(?.)
可選鏈操作符(?.)允許讀取位于連接對象鏈深處的屬性的值，而不必明確驗證鏈中的每個引用是否有效。
比如，思考一個存在嵌套結構的對象 obj。不使用可選鏈的話，查找一個深度嵌套的子屬性時，需要驗證之間的引用，例如：
- let nestedProp = obj.first && obj.first.second;
為了避免報錯，在訪問obj.first.second之前，要保證 obj.first 的值既不是 null，也不是 undefined。
如果只是直接訪問 obj.first.second，而不對 obj.first 進行校驗，則有可能拋出錯誤。
有了可選鏈操作符(?.)，在訪問 obj.first.second 之前，不再需要明確地校驗 obj.first 的狀態，再并用短路計算獲取最終結果：
- let nestedProp = obj.first?.second;
這等價于以下表達式，但實際上沒有創建臨時變量：
- let temp = obj.first;
- let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);
?. 操作符的功能類似于 . 鏈式操作符，不同之處在于：
在引用為空(nullish) (null 或者 undefined) 的情況下不會引起錯誤，該表達式短路返回值是: undefined。
與函數調用一起使用時，如果給定的函數不存在，則返回 undefined。
當嘗試訪問可能不存在的對象屬性時，使用可選鏈操作符將會使表達式更短、更簡明。
有兩點需要我們留意：
如果存在一個屬性名且不是函數, 使用 ?. 仍然會產生一個 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);
會被轉換成：
- const a = {
- b: 1
- };
- console.log(a === null ? void 0 : a.b);
如果層級更深， 會創建臨時變量用于記錄：
- const a = {
- b: {
- c: 1,
- d: 2,
- }
- };
- console.log(a?.b?.c)
會被轉換成：
- 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發布的相關些資料
Heny 目前是 babel 項目的負責人，之前發過一片介紹當前 babel 困境的文章: 知名團開源項目存活有多難?被數百萬人使用的 Babel 陷入財務困境
上圖推文鏈接：https://twitter.com/left_pad/status/1136282005170262016
感興趣的可以去看看。
總結
?. 使用起來是非常方便的, 但如果用的不好， 也會隱藏本應該暴露出來的問題。
所以, 使用的時候一定要清楚自己在做什么。
?. 還有個小兄弟叫 空值合并運算符(??), 這里就不說了， 去 MDN 看文檔吧。
今天就這么多， 希望對大家有所啟發。
原文鏈接：https://mp.weixin.qq.com/s/QKF1K-GQfNl_ha20xAcejg
