什么是可选链操作符？
ECMAScript 2020 中的可选链操作符（Optional Chaining Operator）是一种快捷语法，可以方便地访问对象的属性或方法，同时避免了出现未定义或 null 错误的情况。以往，访问对象的属性或方法时经常需要进行判断，如下所示：
-- ---- -- ----- -- ------- -- ---------- - -- -- --------- -
这样的代码非常冗长，很难维护。现在，使用可选链操作符，上述代码可简化为：
-- -------------- - -- -- --------- -
在 obj、a、b、c 其中任意一个不存在时，代码仍能正常运行，不会报错。这非常便捷，提高了代码的可读性和可维护性。
如何使用可选链操作符？
可选链操作符的语法非常简单，使用问号的形式表示。示例如下：
-- -------- ----- ----- - -------------- -- -------- -------------- -- ---- ----- ----- - -------------------------
在访问对象上的属性或方法时，如果该属性或方法不存在，代码仍能正常执行，返回 undefined 或 null。可选链操作符也可以与其他运算符配合使用，如下所示：
-- ------------ ----- ----- - ------------- - -- -- ----- ----- ----- - ----------- - ------------ - ---------- -- ---------- ----- ----- - ------------- -- -------------
需要注意的是，可选链操作符只能用于访问属性或方法，无法用于访问变量或调用函数。
可选链操作符的进一步应用
可选链操作符可以用于更复杂的对象嵌套结构中，并减少代码量和判断的复杂度。示例如下：
----- ---- - -
----- ------
-------- -
------- ---- ---- -----
----- ---- ------
------ -----
---- --------
--
--
-- ----
----- --- - ---- -- ------------ -- -----------------
-- --------
----- --- - -------------------上面的示例中，使用可选链操作符，一步到位地访问了 user 对象的 address 属性中的 zip 属性，让代码更加简洁明了。
在 React 中的应用也十分广泛。在访问 props 或 state 时，使用可选链操作符可以避免访问未定义或 null 值而导致的报错。示例如下：
-- ---- ----- ----- - ---------- -- --------------- -- ---------------------- -- -------- ----- ----- - ------------------------
可选链操作符的浏览器兼容性
可选链操作符是 ECMAScript 2020 中的新特性，目前并未得到所有浏览器的完全支持。在现代浏览器中，例如 Chrome、Firefox、Safari 和 Edge 浏览器，都已经完全支持该特性。但是，为了在一些老旧浏览器（如 IE）中使用该特性，可能需要在代码中添加兼容性代码或使用 Babel 转译器。因此，在使用可选链操作符时需要注意浏览器兼容性问题。
总结
可选链操作符是 ECMAScript 2020 中的新特性，可以方便地访问对象的属性或方法，避免了出现未定义或 null 错误的情况，使代码更加简洁明了。使用该特性时需要注意浏览器兼容性问题，建议在现代浏览器中使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/649f99c048841e9894bf4bbe