ES9（ECMAScript 2018）是 JavaScript 语言的一个版本，在 ES9 中引入了一项名为“Optional Chaining”的新特性。这是一项非常有用的对象扩展功能，能够更加安全地读取代码中的嵌套对象属性和方法。
Optional Chaining 的用途
在 JavaScript 中，我们经常需要读取和展示嵌套对象属性的值。例如，我们可能会写出以下代码：
if (person && person.name && person.name.first) {
console.log(person.name.first);
}上面的代码会检查 person 对象是否存在，并检查 name 属性是否存在，并检查 first 属性是否存在。只有当这些属性都存在时，我们才能安全地访问 person.name.first 值。
这种处理嵌套数据的方式非常麻烦，也容易出错。Optional Chaining 就是为了解决这个问题而引入的。
Optional Chaining 的语法
Optional Chaining 语法使用问号（?）来指示属性是否存在。如果属性不存在，JavaScript 引擎会立即返回 undefined 值，而不会导致错误。
下面是一个简单的例子：
console.log(person?.name?.first);
在上面的代码中，我们使用 ? 符号指示了 person、name 和 first 属性是否存在。如果任何一个属性不存在，JavaScript 引擎都会返回 undefined 值。
这种语法非常方便，尤其是处理嵌套数据结构时，可以大大简化代码的复杂度。
Optional Chaining 的深度嵌套
Optional Chaining 不仅可以处理简单的属性访问，还可以处理多个嵌套属性的访问。
console.log(person?.address?.city?.postcode);
在上面的代码中，我们使用 Optional Chaining 来访问 person.address.city.postcode 属性。如果 person、address 或 city 属性不存在，JavaScript 引擎都会返回 undefined 值。
Optional Chaining 与函数调用
Optional Chaining 还可以与函数调用一起使用，可以避免在调用某个方法之前检查函数或方法是否存在。
console.log(person?.getName?.());
在上面的代码中，我们使用 Optional Chaining 来调用 person.getName() 方法。如果 person 对象不存在或 getName 方法不存在，JavaScript 引擎都会返回 undefined 值。
示例代码
下面是一些示例代码，展示如何使用 Optional Chaining 处理嵌套数据结构。
-- -------------------- ---- -------
----- ------ - -
----- -
------ -------
----- -----
--
-------- -
----- ---- ------
--------- -------
--
------------- -
------ ----------------------- -----------------------
-
--
--------------------------------- -- ------
--------------------------------------- -- -------
--------------------------------- -- ---------
------------------------------------- -- ----- ----上面的代码演示了如何使用 Optional Chaining 处理嵌套数据结构，并且在调用函数时避免出现问题。
结论
使用 Optional Chaining 是一种更安全、更简单的处理嵌套数据结构的方式。它可以大大减少代码复杂度，并减少出现错误的可能性。如果你在处理嵌套数据结构时使用 Optional Chaining，可以提高代码的健壮性和可读性。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6723718c2e7021665e100db2