在前端开发中，我们经常会遇到 undefined 或 null 的情况，这时候我们需要进行判断，以免出现异常情况。在 ES10 中，新增了可选链运算符，可以帮助我们更加方便地处理这些情况。
可选链运算符
可选链运算符（Optional Chaining Operator）是一种新的语法，它可以在不确定某个属性是否存在的情况下，安全地访问该属性。可选链运算符使用问号（?）来表示。
示例代码：
----- ------ - -
----- -----
---- ---
-------- -
--------- ------
----- -----
-
--
----- ---- - ---------------------
------------------ -- -----
----- ------- - ------------------------
--------------------- -- ---------在上面的代码中，我们使用可选链运算符来获取 person 对象中的 address 对象中的 city 属性。如果 address 对象不存在，那么 city 变量的值就为 undefined。
可选链运算符的嵌套使用
可选链运算符可以在多层属性中嵌套使用，如下所示：
示例代码：
----- ------ - -
----- -----
---- ---
-------- -
--------- ------
----- ------
------- -
----- -------
------- ------
-
-
--
----- ---------- - -----------------------------
------------------------ -- ------
----- ------------ - -------------------------------
-------------------------- -- ------
----- ------- - ------------------------------
--------------------- -- ---------在上面的代码中，我们使用可选链运算符来获取 person 对象中的 address 对象中的 street 对象中的 name 属性。如果任何一个属性不存在，那么变量的值就为 undefined。
可选链运算符的数组使用
可选链运算符也可以用于数组中，如下所示：
示例代码：
----- --- - --- -- --- ----- --------- - --------- ----------------------- -- - ----- ---------- - --------- ------------------------ -- ---------
在上面的代码中，我们使用可选链运算符来获取数组中的第一个元素和第四个元素。如果第四个元素不存在，那么变量的值就为 undefined。
可选链运算符的注意事项
虽然可选链运算符非常方便，但是我们需要注意一些事项：
- 可选链运算符只能用于对象和数组的属性访问，不能用于函数调用、构造函数、new 运算符等。
- 可选链运算符只能用于 ES10 或更高版本的 JavaScript 中使用。
总结
在前端开发中，我们经常需要处理 undefined 或 null 的情况，而 ES10 的可选链运算符可以帮助我们更加方便地处理这些情况。通过本文的介绍，我们了解了可选链运算符的语法、嵌套使用和数组使用，并注意到了可选链运算符的注意事项。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6600df27d10417a222c04378