关于javascript:可选链

官网参考：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，如果不是则持续运算。?. 链使咱们可能平安地拜访嵌套属性。