可选链（?.）

Posted 2021-09-06 yangyangyang

官网参考：https://developer.mozilla.org...
可选链 ?. 是一种 访问嵌套对象属性的防错误方法 。即使中间的属性不存在，也不会出现错误。 如果可选链 ?. 前面部分是 undefined 或者 null，它会停止运算并返回 undefined。
语法：

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

使用注意

可选链虽然好用，但需要注意以下几点：
不能过度使用可选链；
我们应该只将 ?. 使用在一些属性或方法可以不存在的地方，以上面示例代码为例：

const leo = {};
console.log(leo.name?.length);//undefined

这样写会更好，因为 leo 对象是必须存在，而 name 属性则可能不存在。
可选链 ?. 之前的变量必须已声明:
在可选链 ?. 之前的变量必须使用 let/const/var 声明，否则会报错：

leo?.name;
// Uncaught ReferenceError: leo is not defined

代码块使用(?.)等价于：

//存在name打印name,不存在undefined
let leo={
    name:"1"
}
let name = leo?.name;
//等价于
let name;
if (leo != null) {
  name = leo.name;
}

可选链不能用于赋值 :

let object = {};
object?.property = 1; 
// Uncaught SyntaxError: Invalid left-hand side in assignment

可选链访问数组元素的方法

let arr=[1,2,3]
let arrayItem = arr?.[2];
console.log(arrayItem)//3

可选链与函数调用 ?.()
?.() 用于调用一个可能不存在的函数，比如：

let user1 = {
  admin() {
    alert("I am admin");
  }
}
let user2 = {};
user1.admin?.(); // I am admin
user2.admin?.();

?.() 会检查它左边的部分：如果 admin 函数存在，那么就调用运行它（对于 user1）。否则（对于 user2）运算停止，没有错误。
可选链和表达式 ?.[]
?.[] 允许从一个可能不存在的对象上安全地读取属性。

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

可选链 ?. 语法总结

可选链 ?. 语法有三种形式：

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

正如我们所看到的，这些语法形式用起来都很简单直接。?. 检查左边部分是否为 null/undefined，如果不是则继续运算。 ?. 链使我们能够安全地访问嵌套属性。