在前端开发中，我们经常需要对对象的属性或方法进行访问，然而，在对象链较长的情况下，如果没有对对象的存在性进行判断，就会出现无法读取其属性或方法的情况，导致代码出现错误。
在 ES11 中，新增了可选链操作符，可以有效解决这个问题，本文将详细介绍可选链操作符的使用方法及其优势。
什么是可选链操作符
可选链操作符（Optional Chaining Operator）是一种新增的 ES11 语法糖，它通过判断对象的存在性来决定能否进行访问操作，不需要手动进行对象存在性的判断，避免了代码繁琐的判断操作。
可选链操作符的语法为?.，用于在对象的属性或方法访问时进行直接调用，例如：
----- ---- - ------------------------
上述代码中，userData对象的address属性可能不存在，如果使用传统的访问方式，需要进行如下判断：
----- ---- - -------- -- ---------------- -- ----------------------
而使用可选链操作符，则可以直接调用userData?.address?.city，如果address或city不存在，则会返回undefined，不会导致代码出错。
可选链操作符的优势
相较于传统的访问方式，可选链操作符具有以下优势：
- 简洁明了：不需要手动进行对象存在性的判断，代码更加简洁明了。
- 避免出错：当对象不存在时，传统的访问方式会导致代码出错，而可选链操作符则会返回
undefined，不会产生错误。 - 减少代码冗余：当对象链较长时，使用传统的访问方式需要进行多次判断，而使用可选链操作符则可以简化访问过程，减少代码冗余。
可选链操作符在实战中的应用
接下来，我们将通过示例代码来介绍可选链操作符在实战中的应用。
示例 1：判断对象是否存在
----- -------- - -
----- ------
---- ---
-------- -
----- ----------
----- ----------
--
--
----- ---- - ------------------------
------------------ -- ------------
----- ------ - --------------------------
-------------------- -- ------------在此示例中，我们使用可选链操作符来判断userData和其属性是否存在，其中，city属性存在于userData.address中，而street属性不存在于userData.address中，使用可选链操作符，不需要进行多次判断即可实现访问。
示例 2：在 React 中使用可选链操作符
在 React 非常流行的前端框架中，可选链操作符也有广泛的应用，例如，当我们在使用props时，需要判断其是否存在，可以使用可选链操作符来简化访问过程。
-------- ------------- -------- -- -
------ -
-----
---------- ----------------------
--------- ---------------------
---------- -------------------------------
------
--
-在上述代码中，我们使用可选链操作符来访问userData对象及其属性，从而避免了手动进行对象存在性判断的繁琐操作。
总结
通过本文的介绍，我们了解了可选链操作符的定义、语法、优势及在实战中的应用。可选链操作符不仅简化了访问过程，还能减少代码冗余，提高了开发效率，建议在实际开发中积极地应用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653525527d4982a6ebb44986