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

如果我們想要看看飯店周一的開門時間，我們會這么寫

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

原因是我們在開放時間中并沒有定義周一的開放時間，所有會報錯；

那我們該如何解決呢，之前我們可能會添加一個IF語句來解決，例如

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

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

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

這樣就太過于復雜了，判斷太多，代碼不簡潔

ES2020,引入了可選鏈接

上面的代碼可以這樣寫

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

當然，可選連接也可以多層可選

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

真實

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

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

然后通過我們之前學習的for-of去將數(shù)組的每一個數(shù)據(jù)循環(huán)出來

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

接著我們就可以通過可選連接來進行判斷，從來去得到開門和關(guān)門的時間

for (const day of days) {
  const open = restaurant.openingHours[day]?.open;
  console.log(`${day}的開門時間是${open}點`);
}

這樣我們就可以一下看到周幾開門，開門的時間是多久了

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

for (const day of days) {
  const open = restaurant.openingHours[day]?.open ?? '不開門';
  console.log(`${day}的開門時間是${open}點`);
}

可選鏈判斷方法是否存在

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 ?? '用戶不存在');

總結(jié)

JavaScript中的可選鏈是一種語法特性，用于簡化訪問嵌套對象屬性或調(diào)用嵌套函數(shù)的過程。它通過使用問號（?）來判斷屬性或函數(shù)是否存在，避免了因為屬性或函數(shù)不存在而導致的錯誤。
具體而言，可選鏈接使用問號（?）來替代傳統(tǒng)的點號（.）或方括號（[]）語法，在訪問屬性或調(diào)用函數(shù)時可以在鏈式屬性之間插入問號，以確保安全訪問。如果鏈式中的某個屬性或函數(shù)不存在，可選鏈接會返回 undefined 而不會拋出錯誤，從而避免程序中斷。

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

最新評論