在前端开发中，经常会遇到需要访问嵌套对象和数组的情况。但是，如果其中某个属性不存在或者数组中某个元素不存在，就会导致错误。这时候我们常常使用if语句或&&运算符来检查这些值是否存在。但这种写法不仅代码臃肿，还很容易出现很难调试的错误。这时候，optional-chaining这个npm包就派上用场了。
optional-chaining 简介
optional-chaining可以让你在不明确检查是否存在的情况下访问对象属性和数组元素。它类似于对属性或者元素进行try-catch检查并返回一个undefined值。
安装 optional-chaining
你可以通过npm或者yarn来安装optional-chaining：
npm install optional-chaining or yarn add optional-chaining
接下来，我们看一下如何使用optional-chaining。
使用 optional-chaining
假设你要访问嵌套对象中的某个属性：
-- -------------------- ---- -------
----- --- - -
----- -
----- -------
---- ---
-------- -
------ -------------------
------ -----------
-
-
-如果你需要访问email：
const email = obj.user.contact.email
当contact不存在时，你就会得到TypeError错误。
现在，你可以使用optional-chaining来访问email属性：
const email = obj?.user?.contact?.email
如果某个属性不存在，optional-chaining会返回undefined，而不会抛出异常。
对于数组，你可以这样来访问某个元素：
const arr = [1, 2, 3]
假设你要访问arr数组中的第四个元素：
const fourthItem = arr[3]
当arr数组长度不足4时，你就会得到undefined。
现在，你可以使用optional-chaining来访问第四个元素：
const fourthItem = arr?.[3]
示例代码
-- -------------------- ---- -------
----- --- - -
----- -
----- -------
---- ---
-------- -
------ -------------------
------ -----------
-
-
-
----- ----- - -------------------------
------------------ -- ----------------
----- --- - --- -- --
----- ---------- - --------
----------------------- -- ---------结论
optional-chaining简化了我们的代码，并且减少了错误的出现。但是，对于某些较老的浏览器，optional-chaining可能不被支持，在这种情况下，你需要使用传统的if语句或者&&运算符来检查属性是否存在。
即便如此，optional-chaining依然是一个非常有用的npm包，可以大大提高我们的开发效率。
希望这篇文章能够对你理解optional-chaining有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562de81e8991b448e05a1