JavaScript(?.)可选链语法

可选链

如果不确定某个值是否为undefined或null时，可使用?.可选链。
举个栗子：

let obj = {a : 1, b : 2}

此时输出obj.c为undefined，如果继续输出obj.c.d，则代码会报错：

console.log(obj.c.d)  // 报错

如果把.关键词换成?.关键词：

console.log(obj?.c.d)  // undefined

可选链在被调用时会隐式执行一段校验函数，并且不用重新定义变量，它判断出undefined或null时，会立即返回一个undefined而不会继续执行后面的代码，这样的设计可以让代码更加简洁，同时提高执行效率。

可选链嵌套使用

可选链可以多重嵌套使用，当有多个?.时并不会影响代码的可读性，同样，如果有一个值为undefined或null时，也会返回undefined。

双问号语法

当左侧的操作数为null或undefined时，返回其右侧操作数，否则返回左侧操作数。

let customer = {
  name: "Carl",
  details: { age: 82 }
};
let customerCity = customer?.city ?? "暗之城";
console.log(customerCity); // “暗之城”

其他变体

可选链 ?. 不是一个运算符，而是一个特殊的语法结构。它还可以与函数和方括号一起使用。

例如，将 ?.() 用于调用一个可能不存在的函数。

在下面这段代码中，有些用户具有 admin 方法，而有些没有：

let userAdmin = {
  admin() {
    alert("I am admin");
  }
};

let userGuest = {};

userAdmin.admin?.(); // I am admin

userGuest.admin?.(); // 啥都没有（没有这样的方法）

在这两行代码中，我们首先使用点符号（userAdmin.admin）来获取 admin 属性，因为我们假定对象 userAdmain 存在，因此可以安全地读取它。

然后 ?.() 会检查它左边的部分：如果 admin 函数存在，那么就调用运行它（对于 userAdmin）。否则（对于 userGuest）运算停止，没有报错。

如果我们想使用方括号 [] 而不是点符号 . 来访问属性，语法 ?.[] 也可以使用。跟前面的例子类似，它允许从一个可能不存在的对象上安全地读取属性。

let key = "firstName";

let user1 = {
  firstName: "John"
};

let user2 = null;

alert( user1?.[key] ); // John
alert( user2?.[key] ); // undefined

可选链 ?. 不能用在赋值语句的左侧。

例如：

let user = null;

user?.name = "John"; // Error，不起作用
// 因为它在计算的是 undefined = "John"