在前端开发中，我们经常会处理复杂的数据结构，其中对象（Object）是最常见的一种数据类型。但是，如果对象很大而且嵌套层级较多，如何快速取到其中的某个值就成了一个棘手的问题，尤其是在数据结构动态化的情况下。ES11 提供了一种新的方法，可以很好地解决这个问题。本文将介绍这个方法，并结合实例讲解如何应用于前端开发中。
问题描述
考虑以下嵌套层级比较深的对象：
----- --- - -
-- -
-- -
-- -
-- -
-- -
-- ------ -------
-
-
-
-
-
-如果我们想要获取其中 f 的值，我们需要这样做：
----- ------ - ---------------- -- ------ -------
这种方式看起来并不复杂，但是在实际开发中，对象的结构是不确定的，因此在取值时需要先做一些判断，否则就有可能抛出错误。比如：
----- ------ - ----- -- ------- -- --------- -- ----------- -- ------------- -- ----------------
这样的代码既丑陋又容易出错，而且每次修改对象结构时还需要手动更新这个赋值语句。
ES11 方法解决方案
从 ES11 开始，JavaScript 新增了 Optional Chaining（可选链）运算符：?.。这个运算符可以在取值路径中插入问号，表示对于路径中的某些属性不存在时，不会抛出错误，而是返回 undefined。在上述问题中，我们可以修改代码为：
----- ------ - ----------------------
这个表达式会自动判断对象中是否包含路径上的所有属性，当属性不存在时不会直接抛出错误。
除此之外，还可以使用 Nullish Coalescing（空值合并）运算符：??。这个运算符可以在一个值为 null 或 undefined 时，返回一个默认值。例如：
----- ------ - --------------------- -- ---- -------
如果 f 字段不存在，返回 'Not Found'，否则返回 f 字段的值。
实际应用
Optional Chaining 运算符在实际应用中非常方便，不再需要手写一连串的 if 语句。例如，在 React 开发中，我们可以使用可选链运算符获取组件的 props 中的某个值：
-------- ------------- ----- - -- -- - - -- -
----- ------ - -----------
------ -
-----
------- -- ---- -------
------
--
-在 Vue 开发中，使用可选链运算符获取 Vuex 中的某个 state：
--------- -
-------- -
------ ---------------------------------- -- ---- -------
-
-总结
对象结构的复杂度往往会成为前端开发中的一项难点，做好取值操作会让代码更加健壮和易维护。Optional Chaining 和 Nullish Coalescing 的引入，可以大大简化代码，提高开发效率。在未来的开发中，我们可以采用这些 ES11 的语法来更加高效地处理对象的复杂结构。
示例代码：
----- --- - -
-- -
-- -
-- -
-- -
-- -
-- ------ -------
-
-
-
-
-
--
----- ------- - ----------------------
--------------------- -- ------ -------
----- ------- - --------------------- -- ---- -------
--------------------- -- ------ -------
----- ------- - --------------- -- ---- -------
--------------------- -- ---- ------来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64c329d883d39b488171cb43