在前端开发中，经常会遇到需要在嵌套的对象或数组中查找某个值的情况。由于 JavaScript 的弱类型特性，当查找的对象或数组不存在时，代码就会抛出错误，导致程序崩溃。以往解决这个问题的方法是通过大量的 if 判断来保证代码的安全性，但这样的代码也很容易让开发人员产生疲惫感，同时也会降低代码的可读性和维护性。而 ES10 引入的 Optional Chaining 语法可解决这个问题，让代码更加简洁明了。
Optional Chaining 语法简介
ES10 引入的 Optional Chaining 是一种简化 JavaScript 查找嵌套对象或数组的语法。它允许我们使用 ?. 操作符，如果某个属性不存在，则返回 undefined，而不是抛出错误。
示例代码：
-- -------------------- ---- -------
----- ---- - -
----- ------
-------- -
----- ---- ------
------ ----
-
-
-------------------------------- -- --- ----
----------------------------------------- -- ---------在上面的示例代码中，我们使用 ?. 操作符来判断 user.address 对象是否存在。如果存在，则继续查找 city 属性，否则直接返回 undefined。同时也可以看到，在第二个 console.log 语句中，由于 zipCode 属性并不存在，所以直接返回 undefined。
避免代码的臃肿
在实际开发中，经常会遇到需要查找嵌套对象或数组的情况。以往的代码必须要通过复杂的 if 判断才能保证代码的安全性，例如：
-- -------------------- ---- -------
----- ---- - -
----- ------
-------- -
----- ---- ------
------ ----
-
-
-- ----- -- ------------ -- ------------------ -
-------------------------------
- ---- -
------------------------------ -- --- --------
-这样的代码无疑会让代码变得臃肿，同时也会降低代码的可读性和维护性。而使用 Optional Chaining 语法，可以将上述代码简化为：
-- -------------------- ---- -------
----- ---- - -
----- ------
-------- -
----- ---- ------
------ ----
-
-
------------------------------ -- ------------------ -- --- --------内置默认值
在 Optional Chaining 中，我们还可以使用 ?? 操作符来设置默认值，例如：
-- -------------------- ---- -------
----- ---- - -
----- ------
-------- -
----- ---- ------
-
--
----- ------- - --------------------- -- -------- -- --- -------
--------------------- -- ------- -- --- -----在上面的代码中，由于 zipCode 属性并不存在，所以 user.address?.zipCode 的返回值为 undefined。我们可以使用 ?? 操作符来设置一个默认值，当 user.address?.zipCode 返回 undefined 时，则使用 zipCode is not exist 作为默认值。
Optional Chaining 的注意事项
虽然 Optional Chaining 语法可以让代码变得更加简洁明了，但也需要注意几个问题：
- Optional Chaining 只能用于对象或数组的属性访问，而不能用于函数调用或构造函数。
- 如果某个属性的值可能为 null 或 undefined，使用 ?. 操作符时需要特别注意，默认情况下 Optional Chaining 只会判断是否为 undefined，而不会判断是否为 null。如果需要判断 null，可以使用 ?? 操作符。
- Optional Chaining 目前只有 Chrome 浏览器和 Node.js 支持，其他浏览器还需要使用 Babel 等工具进行转换。
总结
在本文中，我们介绍了 ES10 引入的 Optional Chaining 语法，并通过示例代码展示了如何使用 Optional Chaining 语法来避免臃肿的代码。同时，我们还介绍了内置默认值的使用方法，以及需要注意的事项。在实际开发中，Optional Chaining 语法可以让代码变得更加简洁明了，提高了开发效率和代码可读性。需要注意的是，Optional Chaining 目前只有 Chrome 浏览器和 Node.js 支持，所以需要根据实际情况选择使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648bf02848841e9894a39c4c