在前端编程中，我们经常遇到需要从一个对象中取出嵌套的属性或方法的情况。过去，我们可能会使用繁琐的 if-else 或三目运算符来判断对象中是否存在该属性或方法。但是，ES11 推出了一种新特性——Option chaining，可以让代码更为优雅，避免了这些繁琐的处理方式。
Option chaining 的基本概念
Option chaining 是一种新的语法糖，利用问号（?）来判断对象中是否存在某个属性或方法。当我们需要从一个对象中取出嵌套的属性或方法时，可以使用 ?. 运算符来判断对象中是否存在该属性或方法，如果存在就返回该值，否则则返回 undefined。这样我们就不需要再使用 if-else 或者三目运算符来判断对象中是否存在该属性或方法。
Option chaining 的语法如下：
object?.property object?.method()
如果对象中存在 property 或 method，则返回其值，否则返回 undefined。
Option chaining 的示例代码
看一个简单的 Option chaining 的示例代码：
-- -------------------- ---- -------
----- -------- - -
----- ------
---- ---
---- -
------ ---- -----------
-------- ---- -----
-
--
----- ----------- - ----------------------
------------------------- -- ---- -----
----- --------------- - -----------------------
----------------------------- -- ---------在这个示例代码中，我们对 userInfo 对象进行了访问，并使用 ?. 运算符来判断 job 对象中是否存在 company 和 location 属性。在第一个例子中，对象中存在 company 属性，所以 companyName 变量的值为 'ABC Inc.'。在第二个例子中，对象中不存在 location 属性，所以 companyLocation 变量的值为 undefined。
Option chaining 的深度应用
除了可以用于判断对象中是否存在属性或方法之外，Option chaining 还可以用来访问深层次的嵌套对象。举个例子：
-- -------------------- ---- -------
----- ------- - -
----- -------
---- ---
-------- -
-
----- -------
-------- -
----- ------
---- --
-
--
-
----- ---------
-
-
--
----- ----------- - -----------------------------------
------------------------- -- -----
----- --------------- - ---------------------------
----------------------------- -- ---------在这个示例代码中，我们访问了 student 对象中的 classes 数组中的第一个元素的 teacher 对象，并获取了其 name 属性。我们还使用了 ?. 运算符来判断 student 对象中是否存在 classes 数组、数组的第一个元素以及其 teacher 对象和 name 属性。同样的，我们也使用了 ?. 运算符来访问 student 对象中的 classes 数组中的第二个元素的 name 属性。在这两个示例中，如果对象中不存在相应的属性或方法，则返回 undefined。
Option chaining 的指导意义
Option chaining 能够使代码更为优雅、简洁。它避免了我们使用繁琐的 if-else 或者三目运算符来判断对象中是否存在属性或方法。同时，它也可以降低代码实现的复杂度，增加代码可读性。在实际开发中，我们可以更加灵活地使用 Option chaining 来访问对象中的嵌套属性或方法，进一步提高代码的可维护性。
总结
Option chaining 是一种在 ES11 中推出的新特性，它可以让我们更为优雅地从对象中获取嵌套的属性或方法。使用 ?. 运算符可以避免繁琐的 if-else 或者三目运算符的判断。在实际开发中，我们可以更加灵活地使用 Option chaining 来访问深层次的嵌套对象，提高代码的可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e4135cf6b2d6eab3f6dc95
