注：本節(jié)仍然使用之前的飯店的對(duì)象，可以看上幾篇文章查看代碼

如果我們想要看看飯店周一的開(kāi)門(mén)時(shí)間，我們會(huì)這么寫(xiě)

console.log(restaurant.openingHours.mon.open);

原因是我們?cè)陂_(kāi)放時(shí)間中并沒(méi)有定義周一的開(kāi)放時(shí)間，所有會(huì)報(bào)錯(cuò)；

那我們?cè)撊绾谓鉀Q呢，之前我們可能會(huì)添加一個(gè)IF語(yǔ)句來(lái)解決，例如

if (restaurant.openingHours.mon)
console.log(restaurant.openingHours.mon.open);

這樣確實(shí)能解決，但是這時(shí)候我們好像不僅需要判斷mon存不存在，我們可能還需要去判斷openingHours存不存在，那么我們可能還會(huì)這么寫(xiě)

if (restaurant.openingHours && restaurant.openingHours.mon)
console.log(restaurant.openingHours.mon.open);

這樣就太過(guò)于復(fù)雜了，判斷太多，代碼不簡(jiǎn)潔

ES2020,引入了可選鏈接

上面的代碼可以這樣寫(xiě)

console.log(restaurant.openingHours.mon?.open);

當(dāng)然，可選連接也可以多層可選

console.log(restaurant.openingHours?.mon?.open);

真實(shí)

如果我們不知道飯店周幾開(kāi)門(mén)，也不知道周幾的幾點(diǎn)開(kāi)門(mén)，我們可以逐一的去判斷
首先我們創(chuàng)建一個(gè)周一到周日的數(shù)組

const days = ['mon','the','wed','thu','fri','sat','sun'];

然后通過(guò)我們之前學(xué)習(xí)的for-of去將數(shù)組的每一個(gè)數(shù)據(jù)循環(huán)出來(lái)

for (const day of days) {
  console.log(day);
}

接著我們就可以通過(guò)可選連接來(lái)進(jìn)行判斷，從來(lái)去得到開(kāi)門(mén)和關(guān)門(mén)的時(shí)間

for (const day of days) {
  const open = restaurant.openingHours[day]?.open;
  console.log(`${day}的開(kāi)門(mén)時(shí)間是${open}點(diǎn)`);
}

這樣我們就可以一下看到周幾開(kāi)門(mén)，開(kāi)門(mén)的時(shí)間是多久了

那如果我們不想讓不開(kāi)門(mén)的星期為undefined，怎么辦呢？向之前一樣，給他設(shè)置一個(gè)默認(rèn)值

for (const day of days) {
  const open = restaurant.openingHours[day]?.open ?? '不開(kāi)門(mén)';
  console.log(`${day}的開(kāi)門(mén)時(shí)間是${open}點(diǎn)`);
}

可選鏈判斷方法是否存在

console.log(restaurant.order?.(0,1) ?? "方法不存在");
console.log(restaurant.ordertest?.(0,1) ?? "方法不存在");

可選鏈判斷數(shù)組是否存在

const users = [{ name: 'jonas',email: 'example@jonas.com'}];
console.log(users[0]?.name ?? '用戶(hù)不存在');

總結(jié)

JavaScript中的可選鏈?zhǔn)且环N語(yǔ)法特性，用于簡(jiǎn)化訪問(wèn)嵌套對(duì)象屬性或調(diào)用嵌套函數(shù)的過(guò)程。它通過(guò)使用問(wèn)號(hào)（?）來(lái)判斷屬性或函數(shù)是否存在，避免了因?yàn)閷傩曰蚝瘮?shù)不存在而導(dǎo)致的錯(cuò)誤。
具體而言，可選鏈接使用問(wèn)號(hào)（?）來(lái)替代傳統(tǒng)的點(diǎn)號(hào)（.）或方括號(hào)（[]）語(yǔ)法，在訪問(wèn)屬性或調(diào)用函數(shù)時(shí)可以在鏈?zhǔn)綄傩灾g插入問(wèn)號(hào)，以確保安全訪問(wèn)。如果鏈?zhǔn)街械哪硞€(gè)屬性或函數(shù)不存在，可選鏈接會(huì)返回 undefined 而不會(huì)拋出錯(cuò)誤，從而避免程序中斷。

到此這篇關(guān)于JavaScript可選鏈的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)JavaScript可選鏈內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論