可选链操作符是在ES11中引入的新操作符。它可以让我们直接处理可能为 null 或 undefined 的属性而不用进行繁琐的判断，从而减少了代码的复杂度和冗余性。本文将详细介绍可选链操作符的使用，以及如何在实际开发中使用它。
可选链操作符是什么？
在 ES11 中，我们可以使用可选链操作符 ?. 来访问对象的属性、方法或数组元素，如果该对象为 null 或者 undefined，则返回 undefined，而不会抛出异常。
我们知道，如果我们想要访问一个对象深层次的属性，例如 obj.a.b.c.d 的时候，需要确保前面的每一个点都存在，否则就会出错，例如使用 obj.a && obj.a.b && obj.a.b.c && obj.a.b.c.d 或者 if 判断等方式。而现在，使用可选链操作符就可以轻松地实现了。
例如：
-- -------------------- ---- -------
----- ---- - -
----- -------
-------- -
----- ---- -----
-
--
--------------------------------- -- --- ----
------------------------------------ -- ---------
------------------------------------------ -- ---------在上面的例子中，我们使用了可选链操作符 ?，访问了 user 对象的 address 属性以及其中的 city 属性。即使 user 对象没有 address 属性或者 address 对象没有 country 属性，也不会抛出异常，而是返回 undefined。
如何使用可选链操作符？
可选链操作符的链式使用
在 ES11 中，我们可以将可选链操作符与点操作符 ., 方括号操作符 [ ] 链式使用。例如：
-- -------------------- ---- -------
--- ---- - -
----- -------
-------- -
----- ---- -----
-
--
--------------------------------- -- --- ----
----------------------------------------- -- --- ----
----------------------------------- -- --- ----
---------------------------- --------- -- --- ----上例中我们可以看到，使用方括号操作符 [] 也可以使用可选链操作符。
可选链操作符的调用方法
可选链操作符 ?. 可以用于访问对象属性、方法、数组元素等等。例如：
-- -------------------- ---- -------
--- ---- - -
----- -------
-------- ---------- -
------ -------------------
-
--
---------------------------- -- ---------
------------ - - ----- ---- ----- --
---------------------------- -- --- ----需要注意的是，在上述代码中，当 user 对象没有 address 属性时，调用 getCity 方法时返回的是 undefined。
可选链操作符与 nullish 合并操作符的使用
我们也可以使用可选链操作符和 nullish 合并操作符 ?? 配合使用，以便在值为 undefined 或 null 时可以显示默认值。例如:
-- -------------------- ---- ------- --- ---- - - ----- ------- -------- - ----- ---- ----- -- -- ------------------------------- -- -------- ------- -- --- ---- ----------------- - --- ------------------------------- -- -------- ------- -- -- ----------------- - ----- ------------------------------- -- -------- ------- -- -------- ----- ----------------- - ---------- ------------------------------- -- -------- ------- -- -------- ----- ------------ - ----- ------------------------------- -- -------- ------- -- -------- -----
在上面的代码中，我们使用了 ?? 来为值为 undefined 或 null 显示默认值，而在可选链操作符 ?. 中，如果链中的属性或方法返回的是 undefined 或 null，则不会执行后面的 nullish 合并操作符 ??。
总结
使用可选链操作符可以让我们简化代码，减少冗余判断代码，提高代码的可读性和可维护性。在实际开发中，我们可以根据业务需求灵活运用可选链操作符，并且配合 nullish 合并操作符 ?? 使用，让代码更加简洁优雅。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6459d6f1968c7c53b0bf4fcf