ES11 之可选链操作符，看完你就可以把三目表达式都删了
ES11 中新增的可选链操作符 (Optional Chaining Operator) 是一个非常实用的语法， 它可以极大的简化 JavaScript 代码的书写。
在之前的版本中，如果我们要访问一个对象的属性，通常需要使用三目运算符或者 && 运算符来实现判断是否存在这个属性，如下例：
if (obj && obj.prop && obj.prop.value) {
// ...
}但如果使用可选链操作符，这个判断可以被简化成以下的形式：
if (obj?.prop?.value) {
// ...
}可选链操作符有三种使用方式：独立使用、函数调用、链式调用。下面我们来具体了解一下。
独立使用
可选链操作符可以独立使用，它可以判断一个值或对象是否为 null 或 undefined，如果是，它将返回 undefined。以下是一些例子：
let obj = null;
console.log(obj?.prop); // undefined
let obj2 = { prop: undefined };
console.log(obj2?.prop); // undefined
console.log(undefined?.prop); // undefined
console.log(null?.prop); // undefined函数调用
可选链操作符也可以用于函数调用。如果一个函数存在，那么它将被调用，否则将返回 undefined。以下是一个例子：
-- -------------------- ---- ------- -------- ----------------- - ------ ----------- - --- ----- - - ----- ----- -- --- ----- - ----- -------------------------------- -- ----- -------------------------------- -- ---------
链式调用
可选链操作符最常用的方式是链式调用，我们可以用它来判断一个嵌套对象中的属性是否存在。以下是一个示例：
-- -------------------- ---- -------
--- ---- - -
----- ------
-------- -
------- -----------
----- -----
-
--
----------------------------------- -- ----------
------------------------------------ -- ---------如果没有可选链操作符，我们需要写出以下代码：
if (user && user.address && user.address.street) {
console.log(user.address.street);
}这挤压了我们的代码，使得它难以维护。使用可选链操作符，我们的代码变得更加简单明了。
总结
可选链操作符是一个非常好用的语法，可以显著地简化代码并增加其可读性。然而，我们需要谨慎使用它，确保我们必须要检查属性时使用它，而不是仅仅为了简化代码而使用它。
代码示例
-- -------------------- ---- -------
--- ---- - -
----- ------
-------- -
------- -----------
----- -----
-
--
--- ----- - -
------- ---------
----- ------
--
--- ------- - -
-----
-----
--
-- ---------------
--- ---------- - ------------ -- -------------------- -- ----------------------------
-- ----------------
--- ----------- - -------------------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d20d8ab5eee0b52596d9a7