ECMAScript 2019 中的 Optional Chaining 是一项非常实用的特性，可以帮助我们更优雅地处理嵌套的对象和数组，避免了一些繁琐的判断和报错处理。本文将详细解释 Optional Chaining 的使用方法、适用场景和示例。
Optional Chaining 是什么？
在过去，当我们需要取出嵌套对象的某个属性时，通常需要进行一些判断，如下所示：
-- -------------------- ---- -------
----- ------ - -
----- -----
---- ---
-------- -
----- -----
--
--
-- ------ ------- --- ---- --
-- ------- -- -------------- -- -------------------- -
---------------------------------
- ---- -
------------------------
-这种判断并不好看，还容易出错。而 Optional Chaining 则在这种情况下可以帮助我们更简洁地获取属性，避免了冗长的判断和报错处理：
console.log(person?.address?.city || '该人员未填写地址');
如上所示，使用 Optional Chaining 可以更方便地取出嵌套对象的属性，而不用担心因为某个属性不存在而导致的错误。
Optional Chaining 的使用方法
在使用 Optional Chaining 时，我们只需要在需要访问属性的对象属性后面加上一个 ?，就可以避免因为该属性不存在而导致的错误。下面是一个更全面的示例：
-- -------------------- ---- -------
----- ------ - -
----- -----
---- ---
-------- -
----- -----
--
--
----------------------------------- -- --
---------------------------------- -- ---------
-- ------------
------------------------ -- -------- -- --
------------------------ -- -------- -- --
------------------------ -- --------------------- -- --从以上示例可以看出，Optional Chaining 还支持和其他操作符一同使用。同时，在访问数组元素时也可以使用 Optional Chaining：
const numbers = [1, 2, 3]; console.log(numbers?.[1]); // 2 console.log(numbers?.[3]); // undefined
同样，Optional Chaining 也可以与其他操作符一同使用。在处理深层嵌套对象时尤其实用。
Optional Chaining 的适用场景
Optional Chaining 主要适用于需要处理深层嵌套对象或数组时，可以在避免出现错误或异常的情况下更简洁地取出属性或元素。下面是几个适用场景的示例：
1. 访问深层嵌套对象的属性
在访问深层嵌套对象的属性时，我们通常需要进行繁琐的判断。而使用 Optional Chaining 可以避免这种繁琐的操作。
-- -------------------- ---- -------
----- ------ - -
----- -----
---- ---
-------- -
----- -----
--------- -
---- ------
---- -------
--
--
--
-------------------------------------------- -- -----
-------------------------------------------- -- ------
-------------------------------------------- -- ---------2. 处理 API 接口返回的嵌套数据
在处理 API 接口返回的多层嵌套数据时，使用 Optional Chaining 可以简化代码并提高开发效率。
-- -------------------- ---- -------
----- ---- - -
------- ----------
------- -
-------- -------
----- -
----- -----
---- ---
-------- -
----- -----
--------- -
---- ------
---- -------
--
--
--
--
--
-------------------------------------------------------- -- -----
-------------------------------------------------------- -- ------
-------------------------------------------------------- -- ---------3. 处理动态变化的数据结构
在处理动态变化的数据结构时，我们通常需要进行一些额外的判断来适应变化。而使用 Optional Chaining 可以更方便地应对这种情况。
-- -------------------- ---- -------
----- ------ - -
----- -----
---- ---
--
----- ------- - -
----- ------
---- ---
--------- -
-
----- -----
---- ---
--
-
----- -----
---- ---
--
--
--
-- ---------
----------------------------------- -- ---------
------------------------------------------ -- --
------------------------------------------ -- --从上述示例中可以看出，Optional Chaining 还可以帮助我们更灵活地处理各种不同的数据结构和变化。
总结
Optional Chaining 是 ECMAScript 2019 中的一项非常实用的特性，可以使我们的代码更优雅、更简洁，更加灵活地应对各种情况。在日常开发中，我们可以适时使用 Optional Chaining，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649f7e5548841e9894bd74c2