ES2020可选链"?."

一、可选链是什么

可选链 ?. 是一种访问嵌套对象属性的防错误方法。即使中间的属性不存在，也不会出现错误。

二、为什么要使用可选链

在很多情况下，我们需要取一个对象的嵌套属性，但有时会出现下面这种特例：

const a = {};
console.log(a.b.c); // Error!

a.b的值是undefined，所以再取c的值会报错。之前，没有可选链的时候，我们是怎么防止这种errror呢？

console.log(a && a.b && a.b.c);

依次对整条路径上的属性使用 && 运算进行判断，以确保所有节点是存在的，但是写起来很麻烦。这时，如果使用可选链，写法就会简单一些。

console.log(a?.b?.c);

1. 可选链 ?. 前面部分如果是 undefined 或者 null，它会停止运算并返回 undefined。

注意： ?. 语法使其前面的值成为可选值，但不会对其后面的起作用。例如：

const a = {};
console.log(a?.b?.c); // undefined  （b是undefined）
const d = null;
console.log(d.b?.c);  // Error

2. ?. 前的变量必须已声明。

如果未声明变量 tomorrow，那么 tomorrow?.date 会触发一个错误：

// ReferenceError: tomorrow is not defined
tomorrow.date

so, ?.前面的变量必须要通过 var/const/let 进行声明。

三、短路效应（?.method()）

短路效应：正如上文所说，如果?.左边的值为undefined或者null, 运算就会立即停止。

所以，如果后面有任何函数调用或者副作用，它们均不会执行。

let user = null;
let x = 0;

user?.sayHi(x++); // 没事发生

四、?.（）或 ?. []

可选链 ?. 不是一个运算符，而是一个特殊的语法结构。它还可以与()和[]一起使用。

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

在下面这段代码中，user1具有 admin 方法，user2没有：

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

let user2 = {};

user1.admin?.(); // I am admin
user2.admin?.();

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

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

在js中，我们可以使用[]读取对象的属性值。?.也可以和[]连用

let user1 = {
  firstName: "John"
};

let user2 = null; // 假设，我们不能授权此用户

let key = "firstName";

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

alert( user1?.[key]?.something?.not?.existing); // undefined

?.还可以与 delete 一起使用

delete user?.name   // 如果 user 存在，则删除 user.name

 

注意： 我们可以使用 ?. 来安全地读取或删除，但不能写入——可选链 ?. 不能用在赋值语句的左侧。

总结

?. 检查左边部分是否为 null/undefined，如果是则停止返回undefined，如果不是则继续运算。

1. obj?.prop —— 如果 obj 存在则返回 obj.prop，否则返回 undefined。
2. obj?.[prop] —— 如果 obj 存在则返回 obj[prop]，否则返回 undefined。
3. obj?.method() —— 如果 obj 存在则调用 obj.method()，否则返回 undefined。

参考：

https://mp.weixin.qq.com/s/c-yG9NRUvotOWkU2xWu4Sw