JavaScript |可选链接

可选的链接 '?.'是一种访问嵌套对象属性的防错方法，即使中间属性不存在。它最近由 ECMA 国际技术委员会 39 – ECMAScript 引入，由 Claude Pache、Gabriel Isenberg、Daniel Rosenwasser、Dustin Savery 撰写。它的工作原理类似于链式'。除了它不报告错误，而是返回一个未定义的值。当我们尝试调用可能不存在的方法时，它也适用于函数调用。

当我们想要检查一个在树状结构深处的属性值时，我们经常需要检查是否存在中间节点。

let Value = user.dog && user.dog.name;

Optional Chaining Operator 允许开发人员处理其中许多情况，而无需重复自己和/或在临时变量中分配中间结果：

let Value = user.dog?.name;

句法：

obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)

注意：如果此代码出现任何错误，请尝试在在线 JavaScript 编辑器上运行它。

示例：与对象的可选链接

Javascript

const user = {
  dog: {
    name: "Alex"
  }
};
 
console.log(user.cat?.name); //undefined
console.log(user.dog?.name); //Alex
console.log(user.cat.name);

Javascript

let user1 = () => console.log("Alex");
let user2 = {
  dog(){
    console.log("I am Alex");
  }
}
let user3 = {};
 
user1?.();       // Alex
user2.dog?.();   // I am Alex
user3.dog();     // ERROR - Uncaught TypeError:
                 // user3.dog is not a function.
user3.dog?.();   // Will not generate any error.

输出：

示例：带有函数调用的可选链接

Javascript

let user1 = () => console.log("Alex");
let user2 = {
  dog(){
    console.log("I am Alex");
  }
}
let user3 = {};
 
user1?.();       // Alex
user2.dog?.();   // I am Alex
user3.dog();     // ERROR - Uncaught TypeError:
                 // user3.dog is not a function.
user3.dog?.();   // Will not generate any error.

输出：