ECMAScript 2020 是 JavaScript 的最新版本，它引入了许多新特性和语法，以提高开发人员的编写代码的效率和可读性。其中，可选链（Optional Chaining）是一项非常实用的新特性。
什么是可选链？
可选链是一种新的语法，它可以让开发人员更加优雅地处理 JavaScript 对象和数组中的 undefined 和 null 值。具体来说，可选链是一种简化和更加安全的访问嵌套对象属性和数组元素的语法。
传统上，如果您需要获取嵌套对象属性或数组元素的值，您必须使用以下代码：
if (obj && obj.property && obj.property.subproperty) {
// Access the value
}这种编码方式非常繁琐，尤其是当您需要访问深层嵌套对象属性时。
使用可选链，您可以使用以下代码：
if (obj?.property?.subproperty) {
// Access the value
}这种方法使代码更加简洁，并且更加安全，因为它们不会触发错误的 null 引用或 undefined 引用。当对象或数组中的属性或元素不存在时，它们会返回 undefined 而不是抛出错误。这使得代码更加健壮，并且可以更轻松地编写可读性更高的代码。
可选链的语法和用法
可选链的语法是非常简单的，只需要在属性或数组元素上添加一个问号（?），表示这个属性或元素是可选的。具体来说，开发人员可以在以下 JavaScript 表达式中使用可选链：
对象属性
object?.property object?.methodName() object?.[expression]
示例代码：
-- -------------------- ---- -------
----- ---- - -
----- ------
-------- -
----- ----------
------- --------- ------
--
--
------------------------ -- -----
----------------------- -- ---------
--------------------------------- -- ---------
------------------------------------- -- ---------数组元素
array?.[index]
示例代码：
const arr = [1, 2, 3]; console.log(arr?.[0]); // 1 console.log(arr?.[3]); // undefined
在上面的示例中，当数组的索引值为 3 时，它返回 undefined 而不是抛出错误。
可选链的注意事项
您需要注意以下几点：
- 可选链只支持对象和数组，不能用于其他类型的值。
- 可选链无法在函数调用中使用。这意味着您无法使用可选链调用函数并传递参数。
- 如果对象或数组不是 null 或 undefined，但它的属性或元素是 null 或 undefined，这仍然会触发错误。为了避免这种问题，请确保使用可选链的整个属性链中不存在 null 或 undefined 值。
结论
在 ECMAScript 2020 中，可选链成为了一项非常实用的新特性。使用它，您可以更加优雅地处理 JavaScript 对象和数组中的 null 和 undefined 值，并更加轻松地编写高质量、可读性更高的 JavaScript 代码。
虽然可选链不是万能的，但与传统的判空方法相比，它已经成为 JavaScript 开发人员的强有力的工具。了解和使用它将使您的代码更加简洁、健壮和可读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674ff242fbd23cf89071158e