可选链（?.） 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，如果不是则继续运算。 ?. 链使我们能够安全地访问嵌套属性。