ES6+ 可選鏈操作符

1. 前言

在 ES5 中對于安全地訪問對象的深嵌套屬性時，首先檢查它的上一個屬性是否存在，然后才能獲取屬性的值，否則就會報錯：

var obj = {}
console.log(obj.a)		// undefined
console.log(obj.a.b)	// Uncaught TypeError: Cannot read property 'b' of undefined

上面的代碼中，obj 是一個對象，在獲取 obj 對象的屬性 a 時，屬性 a 沒有被定義所以返回 undefined，第 3 行獲取 obj 對象 a 下的 b，由于 obj 上沒有 a 屬性，再獲取 a 上的 b 屬性就會報錯。一般這樣的情況，在程序中需要做前置驗證，大部分情況會借助 && 來完成。

var obj = {}
var b = obj.a && obj.a.b
console.log(b)	// undefined

上面的代碼中第 2 行首先會判斷 obj.a 的值，如果不為空則繼續執行 obj.a.b 否則返回 undefined。這樣做雖然能保證程序的健壯性，但當嵌套的對象很深時，則要對每一層進行驗證，這樣不利于閱讀，而且容易出現程序上的錯誤。

針對上面的場景，ES2020 最新的版本給出了它的解決方案 —— 可選鏈操作符。我們可以直接在瀏覽器的控制臺中進行測試，那什么是可選鏈操作符呢？本節我們來學習這個 ES6 的新語法。

2. 方法詳情

可選鏈操作符使用 ?. 來表示，可以判斷操作符之前屬性是否有效，從而鏈式讀取對象的屬性或返回 undefined 。

作用與 . 操作符類似。不同的是 ?. 如果對象鏈上的引用是 null 或者 undefined 時， . 操作符會像前言中的例子拋出一個錯誤，而 ?. 操作符則會按照短路計算的方式進行處理，返回 undefined?？蛇x鏈操作符也可用于函數調用，如果操作符前的函數不存在，也將會返回 undefined。下面我們來看它的使用語法：

2.1 基本語法

語法使用：

obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)

參數解釋：

實例

var user = {
  name: 'Kira',
  address: {
    city: 'beijing',
    other: {}
  }
}
console.log(user?.name);	// Kira
a?.b);	// undefined
console.log(user?.address?.city);		// beijing
console.log(user?.address?.other?.a?.b);	// undefined

上面的代碼可以看出，使用的方式很簡單，在確保上一個值是有效時才會去獲取下面的屬性，避免程序報錯。

對象的引用或函數可能是 undefined 或 null 時，可選鏈操作符提供了一種方法來簡化被連接對象的值訪問。

3. 使用場景

3.1 可選鏈和表達式

當使用方括號與屬性名的形式來訪問屬性時，你也可以使用可選鏈操作符：

let firstName = obj?.['first' + 'Name'];

3.2 可選鏈與函數調用

當嘗試調用一個可能不存在的方法時也可以使用可選鏈。這將是很有幫助的。當函數調用時如果被調用的方法不存在，使用可選鏈可以使表達式自動返回 undefined 而不是拋出一個異常。

var person = {}
var name = person.getName?.();

注意：如果屬性名不是函數也會報錯，可選鏈只會判斷屬性是否有效，而不能判斷屬性的類型。

var person = {getName: ''}
var name = person.getName?.();
// Uncaught TypeError: person.getName is not a function

3.3 可選鏈不能用于賦值

可選鏈是取值操作時所用的安全方法，不能使用在賦值操作上。

let obj = {};
obj?.name = 'imooc';	// Uncaught SyntaxError: Invalid left-hand side in assignment

上面的代碼第 2 行使用可選鏈進行賦值操作，控制臺會報語法錯誤，賦值的左側是無效的。

3.4 可選鏈訪問數組元素

可選鏈也是可以使用在數組取值的前置驗證的。

var arr = []
let item = arr?.[5];

4. 小結

本節學習了 ES6 中新增的可選鏈語法，它提供了一種方法來簡化被連接對象的值訪問，保證訪問數據的安全性。它可以用于對象、數組、函數中。這個語法很有用，在項目中使用可以達到事半功倍的效果。