可選鏈操作符(?.)的示例分析

這期內容當中小編將會給大家帶來有關可選鏈操作符(?.)的示例分析，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

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

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

比如，思考一個存在嵌套結構的對象 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  陷入財務困境

上述就是小編為大家分享的可選鏈操作符(?.)的示例分析了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。