回顧下可選鏈操做符(?.)

背景

今天又被 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。

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

有兩點須要咱們留意：

1. 若是存在一個屬性名且不是函數, 使用 ?. 仍然會產生一個 TypeError 異常 (x.y is not a function).

let result = someInterface.customMethod?.();

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

若是你但願容許 someInterface 也爲 null 或者 undefined，那麼你須要像這樣寫 someInterface?.customMethod?.()

2. 可選鏈不能用於賦值

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 困境的文章。

上圖推文連接：https://twitter.com/left_pad/...

感興趣的能夠去看看。

總結

?. 使用起來是很是方便的, 但若是用的很差， 也會隱藏本應該暴露出來的問題。

因此, 使用的時候必定要清楚本身在作什麼。

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

今天就這麼多， 但願對你們有所啓發。