---

theme: channing-cyan

簡介：

可選鏈操作符( ?. )允許讀取位於連線物件鏈深處的屬性的值，而不必明確驗證鏈中的每個引用是否有效。?. 操作符的功能類似於 . 鏈式操作符，不同之處在於，在引用為空[null]或者 [undefined] 的情況下不會引起錯誤，該表示式短路返回值是 undefined。與函式呼叫一起使用時，如果給定的函式不存在，則返回 undefined。

當嘗試訪問可能不存在的物件屬性時，可選鏈操作符將會使表示式更短、更簡明。在探索一個物件的內容時，如果不能確定哪些屬性必定存在，可選鏈操作符也是很有幫助的。

語法：

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

舉例：

通過連結的物件的引用或函式可能是undefined或者null時，可選鏈操作符提供了一種方法來簡化對被連結物件的值的訪問。

比如：一個存在巢狀結構的物件obj。不使用可選鏈操作符的話，查詢obj的一個深度巢狀的子屬性時，需要驗證之間的引用，例如：

let name = obj.person && obj.person.name;

使用可選鏈操作符的寫法如下：

let name =obj.person?.name;

下面的例子中我們想獲取obj物件中person物件的name屬性，

如果我們的obj是如下定義，那麼是可以正常取到值得：

let obj = {   person: {       name: '張三'   } } /* 首先我們不進行判斷直接取值*/ let name = obj.person.name; console.log("name:", name)

列印輸出：

以上是正常情況，那如果我們定義的obj物件中沒有person物件

程式碼如下：

let obj = {            // person: {                name: '張三'            // }       } /*沒有person物件的情況下不進行判斷直接取值*/ let name = obj.person.name; console.log("name:", name)

輸出結果：可以看到報錯無法讀取未定義的屬性

那麼在實際的開發中呢，我們可能不能確定物件中到底有沒有想要的屬性，這時候我們就需要自行判斷，那還是上面的例子，我們加入判斷：

let obj = {            // person: {                name: '張三'            // }       } /*沒有person物件的情況下用常規判斷方式取值*/ let name = obj.person && obj.person.name; console.log("name:", name)

可以看到輸出結果如下：最起碼沒有報錯了

以上是常規判斷方式，試想一下，如果物件巢狀層級很深，這樣寫是很麻煩的，所有就有了下面這種判斷方式：可選鏈式操作符：

let obj = {            // person: {                name: '張三'            // }       } /*沒有person物件的情況下用可選鏈操作符判斷進行取值*/ let name =obj.person?.name; console.log("name:", name)

輸出結果：可以看到結果是一樣的，程式也沒有報錯

通過使用 ?. 操作符取代 . 操作符，JavaScript 會在嘗試訪問 obj.person.name 之前，先隱式地檢查並確定 obj.person 既不是 null 也不是 undefined。如果obj.person 是 null 或者 undefined，表示式將會短路計算直接返回 undefined。

該文章參考地址：

可選鏈操作符 - JavaScript | MDN (mozilla.org)

我這裡只說到了一點淺顯的用法，想深入瞭解的同學可以前往以上地址。