关于javascript:可选链

官网参考：https://developer.mozilla.org...
可选链 ?. 是一种 拜访嵌套对象属性的防错误方法 。即便两头的属性不存在，也不会呈现谬误。 如果可选链 ?. 后面局部是 undefined 或者 null，它会进行运算并返回 undefined。
语法：

obj?.propobj?.[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,不存在undefinedlet 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 adminuser2.admin?.();

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

let user1 = {  firstName: "John"};let user2 = null;let key = "firstName";alert( user1?.[key] ); // Johnalert( user2?.[key] ); // undefinedalert( 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，如果不是则持续运算。 ?. 链使咱们可能平安地拜访嵌套属性。