在过去，访问嵌套属性和方法时，需要考虑到空值和 undefined 的情况。这通常需要一些额外的代码来进行检查和处理，否则程序可能会出现崩溃或错误的结果。为了解决这个问题，ECMAScript 2020 引入了可选链 (optional chaining) 操作符。它可以简化代码，在处理对象和数组时更加便捷、可读，同时也可以避免不必要的错误。
可选链 (optional chaining) 操作符的介绍
可选链 (optional chaining) 是一个新的操作符，它可以安全地访问可能为 null 或 undefined 的对象属性和方法，而不会导致异常的错误。它使用问号（?）来标记一个属性或方法的前面是否可空。如果该属性或方法存在，则进行访问，否则返回 undefined。这可以提高代码的可靠性和可读性。
基本语法
可选链 (optional chaining) 操作符语法如下：
---------------- ---------------- --------------------
其中，object 表示要访问的对象，property 表示对象的属性，method() 表示对象的方法，[expression] 表示索引表达式，问号“？”用于表示前面的属性或方法是否存在。如果存在，则访问该属性或方法，否则返回 undefined。
示例代码
下面是一个简单的例子，使用可选链 (optional chaining) 操作符来访问嵌套属性和方法：
----- ------ - -
----- ------
-------- -
----- -----------
------- -------- -----
-
--
----- --------- - ------ -- -------------- -- --------------------
----- --------- - ----------------------
----------------------- -- -- ----------
----------------------- -- -- ----------在这个例子中，我们使用了两种不同方式来访问嵌套的城市属性。第一种方式使用了 && 运算符和判断，而第二种方式使用了可选链 (optional chaining) 操作符。
可选链 (optional chaining) 操作符的实现
可选链 (optional chaining) 操作符本质上是一个语法糖，它将条件表达式和访问操作结合起来实现了更加简洁安全的访问方式。它的实现基于 JavaScript 中的 null 和 undefined 值的判断。因为在 JavaScript 中，访问 null 和 undefined 值的属性和方法会导致代码运行错误。
在 JavaScript 中，我们可以使用三种方式来判断一个对象是否为 null 或 undefined：
- 使用 if 语句和 typeof 运算符来判断一个变量是否为 undefined
- 使用 if 语句和 === 比较运算符来判断一个变量是否为 null
- 使用 || 运算符进行默认值的设定，如果变量是 null 或 undefined，则使用默认值
基于以上的判断方式，可选链 (optional chaining) 操作符的实现需要考虑到以下几个方面：
- 对象是否为 null 或 undefined
- 访问的属性或方法是否存在
- 是否需要返回 undefined
可选链 (optional chaining) 操作符的实现过程可以简单归纳如下：
-- ------- -- ---------------- - ----------------- - -- -- -- ------------------ - ------------------ -
在这个实现过程中，我们首先使用了 && 运算符来判断对象是否存在以及属性或方法是否存在。然后执行属性或方法。而使用可选链 (optional chaining) 操作符时，我们直接使用 ?. 运算符来判断是否存在，整个过程更加简洁。
可选链 (optional chaining) 操作符的应用
可选链 (optional chaining) 操作符可以让我们更加方便地处理对象和数组的访问操作，同时也可以避免代码中的异常错误。
对象属性的访问
在访问对象属性时，经常需要考虑到对象是否为空或属性是否存在的情况。而使用可选链 (optional chaining) 操作符可以使代码更加简洁和可读。
----- ------ - -
----- ------
-------- -
----- -----------
------- -------- -----
-
--
----- -------- - ----------------------
---------------------- -- -- ----------在这个例子中，我们使用了可选链 (optional chaining) 操作符来访问 person 对象中的 address 属性和 city 属性。当 address 属性或 city 属性不存在时，代码不会抛出异常错误，而是直接返回 undefined。
对象方法的调用
在调用对象方法时，经常需要考虑到对象是否为空或方法是否存在的情况。而使用可选链 (optional chaining) 操作符可以使代码更加健壮和可读。
----- ------ - -
----- ------
---------- -
------------------- -- ---- -- ---------------
-
--
---------------------在这个例子中，我们使用了可选链 (optional chaining) 操作符来调用 person 对象中的 sayHello 方法。当 sayHello 方法不存在时，代码不会抛出异常错误，而是返回 undefined。注意到我们在调用方法时，使用了空括号来表示方法的调用，这是因为可选链操作符只支持调用方法，而不支持调用函数。
数组的访问
在访问数组元素时，经常需要考虑到数组是否为空或元素是否存在的情况。而使用可选链 (optional chaining) 操作符可以简化代码。
----- ---- - --- -- -- --- ----- ---- - ---------- ------------------ -- -- -
在这个例子中，我们使用了可选链 (optional chaining) 操作符来访问 list 数组中的第四个元素。当该元素不存在时，代码不会抛出异常错误，而是返回 undefined。
组合应用
当需要读取嵌套对象或数组时，可能需要多次使用可选链 (optional chaining) 操作符。可以在其中嵌套使用可选链 (optional chaining) 操作符，以便更好地组合代码。
----- ---- - -
----- -
- ----- ------ ---- -- --
- ----- -------- ---- -- -
-
--
----- ----- - --------- -- ------------ -- ------------------
----- ----- - ----------------------
------------------- -- -- -----
------------------- -- -- -----总结
可选链 (optional chaining) 操作符是 ECMA-262 标准新添加的一个语法糖，它能让我们更加方便地访问对象和数组的属性和方法，同时也避免了访问 null 或 undefined 值时导致的异常错误。可选链 (optional chaining) 操作符的实现基于判断对象和属性是否存在的条件，并使用了语法糖来简化访问操作。
在实际开发中，我们可以试着使用可选链 (optional chaining) 操作符来代替条件语句和判断语句，使代码更加简洁、可读、健壮。同时也需要注意到，可选链 (optional chaining) 操作符只是一种新的语法糖，不能代替严谨的代码逻辑设计和调试。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6645eb1ad3423812e43fc3be