JavaScript 可选链操作符详解：安全访问嵌套属性与方法

注：本节示例继续沿用前文介绍的饭店对象，具体代码结构可参考之前的文章。

假设我们需要获取饭店周一的开门时间，常规写法如下所示。

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

由于饭店对象中并未定义周一的开放时间字段，直接访问会触发运行时错误。

为解决此问题，传统做法是添加条件判断语句，例如使用 if 语句进行安全检查。

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

虽然上述方式可以解决问题，但随着嵌套层级增加，我们需要同时判断 openingHours 和 mon 是否存在，导致代码逻辑变得冗余。

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

这种多层嵌套判断使代码显得过于复杂，缺乏简洁性。

ES2020 标准引入了可选链（Optional Chaining）特性。

使用可选链后，上述代码可简化为：console.log(restaurant.openingHours.mon?.open);。

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

可选链支持多层级联调用，例如：console.log(restaurant.openingHours?.mon?.open);。

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

运行结果将返回真实值或 undefined。

若不确定饭店在周几开门以及具体几点开门，可逐一进行判断。首先，创建一个包含周一到周日缩写的数组。

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

接着，利用之前学习的 for-of 循环遍历数组中的每一天。

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

在循环内部，通过可选链操作符判断并获取开门时间。

for (const day of days) {
  const open = restaurant.openingHours[day]?.open;
  console.log(`${day}的开门时间是${open}点`);
}

这样即可一次性输出周几开门及对应的开门时间。

若希望将不开门的星期显示为默认值而非 undefined，可结合空值合并运算符设置默认值。

for (const day of days) {
  const open = restaurant.openingHours[day]?.open ?? '不开门';
  console.log(`${day}的开门时间是${open}点`);
}

可选链还可用于判断方法是否存在，例如：console.log(restaurant.order?.(0,1) ?? "方法不存在");。

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

此外，可选链同样适用于数组访问，例如：console.log(users[0]?.name ?? '用户不存在');。

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

总结

JavaScript 中的可选链是一种语法特性，用于简化访问嵌套对象属性或调用嵌套函数的过程。它通过使用问号（?）来判断属性或函数是否存在，避免了因为属性或函数不存在而导致的错误。具体而言，可选链接使用问号（?）来替代传统的点号（.）或方括号（[]）语法，在访问属性或调用函数时可以在链式属性之间插入问号，以确保安全访问。如果链式中的某个属性或函数不存在，可选链接会返回 undefined 而不会抛出错误，从而避免程序中断。

到此这篇关于JavaScript可选链的实现示例的文章就介绍到这了,更多相关JavaScript可选链内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！