可選鏈操作符( ?. )允許讀取位于連接對象鏈深處的屬性的值，而不必明確驗證鏈中的每個引用是否有效。?. 操作符的功能類似于 . 鏈?zhǔn)讲僮鞣煌幵谟?，在引用為?nullish ) (null 或者 undefined) 的情況下不會引起錯誤，該表達(dá)式短路返回值是 undefined。與函數(shù)調(diào)用一起使用時，如果給定的函數(shù)不存在，則返回 undefined。

es6可選鏈

?.

語法

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

例子

如果我們多層的調(diào)用，直接調(diào)用當(dāng)中間某層不存在時代碼就會報錯，如直接不判斷調(diào)用adventurer.from.cat.name，當(dāng)中間某一層如 cat 不存在時就會報錯

發(fā)現(xiàn)判斷某個對象的函數(shù)存在才調(diào)用，舊方法就會比較繁瑣

let adventurer = { from: { cat: { name: 'suisuiz' } } }

if(adventurer && adventurer.from && adventurer.from.cat && adventurer.from.cat.name){
    let name = adventurer.from.cat.name
    console.log(name)
}

es6 可選鏈 簡化了很多

adventurer?.from?.cat?.name

if(adventurer?.from?.cat?.name) {
    let name = adventurer?.from?.cat?.name
    console.log(name)
}

文檔

MDN | 可選鏈操作符
MDN | 空值合并運算符
阮一峰 | ECMAScript 6 入門 | 運算符的擴(kuò)展