“可选链调用”是JS的什么新特性？

• 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

可选链操作符的定义

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。

?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空([nullish]) ([null] 或者 [undefined] 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。

基本用法

案例1

let allName = {
    name: "zz",
    age: {
        name: "cat"
    }
}
console.log(allName.genter ?. age)
// undefined
复制代码

案例2

let nestedProp = obj.first?.second;

复制代码

这句代码等价于

let temp = obj.first;
let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);
复制代码

案例3

const zz = {
  a: 'foo',
  b: {
    c: 'bar'
  }
}

console.log(zz.b?.c)      // 输出 bar
console.log(zz.d?.c)      // 输出 undefined
console.log(zz.func?.())  // 不报错，输出 undefined

复制代码

可选链除了可以用在获取对象的属性，还可以用在数组的索引 arr?.[index]，也可以用在函数的判断 func?.(args)，当尝试调用一个可能不存在的方法时也可以使用可选链。

调用一个对象上可能不存在的方法时（版本原因或者当前用户的设备不支持该功能的场景下），使用可选链可以使得表达式在函数不存在时返回 undefined 而不是直接抛异常。

应用场景

案例1

以前的用法 我相信很多人在项目中都会用这种用法来避免js出错

let allName = {
    name: "zz",
    age: {
        name: "cat"
    }
}
if(allName && allName.age && allName.age.name === "cat") {

}
复制代码

现在我们学会了可选链操作符,我们来试试

if(allName ?. age ?. name === "cat") {
    
}
复制代码

案例2

我们使用空值合并操作符设置一个默认值,什么是空值合并操作符,可以阅读这篇文章,空值合并操作符。

let customer = {
  name: "Carl",
  details: { age: 82 }
};
let customerCity = customer?.city ?? "zz";
console.log(customerCity); // “zz”
复制代码

推荐阅读

• # 我在项目用到这十多种轮子助我提升开发效率，收藏
• # JS箭头函数 什么时候用 ，什么时候不能用，我总结出了4点
• # 严格模式和非严格模式的区别，我该如何去总结？
• # 我用一文总结File base64 Blob对象之间切换自如
• # 瞻前思后 如何让文章中的图片随屏幕滚动滑入滑出？我是这样实现的

参考文档：

1. 运算符优先级 - JavaScript | MDN