官網參考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining
可選鏈 ?. 是一種 訪問巢狀物件屬性的防錯誤方法 。即使中間的屬性不存在，也不會出現錯誤。 如果可選鏈 ?. 前面部分是 undefined 或者 null，它會停止運算並返回 undefined。
語法：

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

使用注意
可選鏈雖然好用，但需要注意以下幾點：
不能過度使用可選鏈；
我們應該只將 ?. 使用在一些屬性或方法可以不存在的地方，以上面示例程式碼為例：

const leo = {};
console.log(leo.name?.length);//undefined

這樣寫會更好，因為 leo 物件是必須存在，而 name 屬性則可能不存在。
可選鏈 ?. 之前的變數必須已宣告:
在可選鏈 ?. 之前的變數必須使用 let/const/var 宣告，否則會報錯：

leo?.name;
// Uncaught ReferenceError: leo is not defined

程式碼塊使用(?.)等價於：

//存在name列印name,不存在undefined
let leo={
name:"1"
}
let name = leo?.name;
//等價於
 

let name;
if (leo != null) {
name = leo.name;
}

可選鏈不能用於賦值 :

let object = {};
object?.property = 1;
// Uncaught SyntaxError: Invalid left-hand side in assignment

可選鏈訪問陣列元素的方法

let arr=[1,2,3]
let arrayItem = arr?.[2];
console.log(arrayItem)//3

可選鏈與函式呼叫 ?.()
?.() 用於呼叫一個可能不存在的函式，比如：

let user1 = {
admin() {
alert(
 
"I am admin");
}
}
let user2 = {};
user1.admin?.(); // I am admin
user2.admin?.();

?.() 會檢查它左邊的部分：如果 admin 函式存在，那麼就呼叫執行它（對於 user1）。否則（對於 user2）運算停止，沒有錯誤。
可選鏈和表示式 ?.[]
?.[] 允許從一個可能不存在的物件上安全地讀取屬性。

let user1 = {
firstName: "John"
};
let user2 = null;
let key = "firstName";
alert( user1?.[key] ); // John
alert( user2?.[key] ); // undefined
alert( user1?.[key]?.something?.not?.existing); // undefined

可選鏈 ?. 語法總結
可選鏈 ?. 語法有三種形式：

obj?.prop —— 如果 obj 存在則返回 obj.prop，否則返回 undefined。
obj?.[prop] —— 如果 obj 存在則返回 obj[prop]，否則返回 undefined。
obj?.method() —— 如果 obj 存在則呼叫 obj.method()，否則返回 undefined。

正如我們所看到的，這些語法形式用起來都很簡單直接。?. 檢查左邊部分是否為 null/undefined，如果不是則繼續運算。 ?. 鏈使我們能夠安全地訪問巢狀屬性。