允許讀取位于連接對(duì)象鏈深處的屬性的值晌柬，而不必明確驗(yàn)證鏈中的每個(gè)引用是否有效识埋。?. 操作符的功能類似于 . 鏈?zhǔn)讲僮鞣湫Γ煌幵谟诮＃谝脼榭?nullish ) (null 或者 undefined) 的情況下不會(huì)引起錯(cuò)誤钾军，該表達(dá)式短路返回值是 undefined。與函數(shù)調(diào)用一起使用時(shí)绢要，如果給定的函數(shù)不存在吏恭，則返回 undefined。
當(dāng)嘗試訪問(wèn)可能不存在的對(duì)象屬性時(shí)重罪，可選鏈操作符將會(huì)使表達(dá)式更短樱哼、更簡(jiǎn)明。在探索一個(gè)對(duì)象的內(nèi)容時(shí)剿配，如果不能確定哪些屬性必定存在搅幅，可選鏈操作符也是很有幫助的。
在前我們獲取一個(gè)對(duì)象很深的子節(jié)點(diǎn)時(shí)呼胚，為了安全我們會(huì)寫(xiě)很多級(jí)的判斷盏筐。如：
const config = {
a: {
b: {
c: {
d: {
e: 100
}
}
}
}
}, getE = (config) => {
const _e = config && config.a && config.a.b && config.a.b.c && config.a.b.c.d && config.a.b.c.d.e;
return _e;
}
console.log(getE(config));
但是有了可選鏈?zhǔn)讲僮鞣?code>?.，我們就可以通過(guò)一下寫(xiě)法實(shí)現(xiàn)
// 只更改getE 函數(shù)砸讳，其他不變
const getE = (config) => {
// const _e = config && config.a && config.a.b && config.a.b.c && config.a.b.c.d && config.a.b.c.d.e;
const _e = config?.a?.b?.c?.d?.e;
return _e;
}
由此可見(jiàn)琢融，可選鏈?zhǔn)讲僮鞣?code>?.簡(jiǎn)化了很多代碼界牡，減少了部分工作量，代碼看起來(lái)也更加清晰漾抬。
使用方法：
- 通過(guò)連接的對(duì)象的引用或函數(shù)可能是 undefined 或 null 時(shí)宿亡，可選鏈操作符提供了一種方法來(lái)簡(jiǎn)化被連接對(duì)象的值訪問(wèn)。
const config = {
a: {
b: {
c: {
d: {
e: 100
}
}
}
}
};
let _e = config?.a?.b?.c?.d?.e; // 100
let _e_ = config?.aa?.b?.c?.d?.e; // 返回 undefined 而沒(méi)有報(bào)錯(cuò)纳令，保證程序繼續(xù)執(zhí)行挽荠，而不是中斷
- 可選鏈與函數(shù)調(diào)用
函數(shù)調(diào)用時(shí)如果被調(diào)用的方法不存在，使用可選鏈可以使表達(dá)式自動(dòng)返回 undefined 而不是拋出一個(gè)異常平绩。
const config = {
aFun:()=>{
return 100;
}
};
let data = config.aFun?.(); // 100
let data = config.bFun?.(); // undefined
- 可選鏈和表達(dá)式
當(dāng)使用中括號(hào)與屬性名的形式來(lái)訪問(wèn)屬性時(shí)圈匆，也可以使用可選鏈操作符
const config = {
ab:100
};
let _ab = config?.['a' + 'b']; // 100
- 可選鏈不能用于賦值語(yǔ)句：
const config = {};
config?.a= 100; // Uncaught SyntaxError: Invalid left-hand side in assignment
- 可選鏈訪問(wèn)數(shù)組元素
const arr = [100, 200,300];
let item = arr?.[0]; // 100
- 使用空值合并操作符 和
||是一個(gè)效果
空值合并操作符可以在使用可選鏈時(shí)設(shè)置一個(gè)默認(rèn)值
const config = {
a: 100
};
let _a = config?.a??100; // 100
成功的秘訣，在永不改變既定的目的捏雌。 ——盧梭
