引言
随着 JavaScript 代码越来越复杂，我们经常需要遍历多层嵌套的对象或数组来访问其中的属性或元素。然而，当对象或数组中的某个属性或元素未定义时，代码就可能会抛出 TypeError 异常，并停止执行。为了避免这种情况，我们需要使用大量的 null 检查来确保属性或元素已定义。不过，这种做法不仅冗长，还不利于我们的代码可读性和维护性。
幸运的是，ECMAScript 2019 引入了可选链操作符，为我们提供了一种更优雅和简单的方式来访问嵌套属性或元素。在本文中，我们将详细介绍可选链操作符的使用方法和注意事项，并通过示例代码来说明如何使用该操作符来优化代码。
可选链操作符的基本用法
可选链操作符 ?. 可以让我们在访问属性或调用方法时，避免抛出 TypeError 异常。如果属性或方法不存在，则操作符会将整个表达式的值设为 undefined，而不会再执行下去。下面是一个使用可选链操作符的示例：
-- -------------------- ---- -------
----- ---- - -
----- -
-------- -
------- ---- --- --------
---- -------
-
--
---------- -
- ----- ------- ------ ------------------ --
- ----- ------- ------ ------------------ -
-
--
-- ------- -------- --------
----- --- - --------- -- ----------------- -- ----------------------
-- ---- -------- --------
----- --- - ------------------------在上面的示例中，我们使用可选链操作符 ?. 来访问嵌套的属性。而在没有使用可选链操作符的情况下，我们需要使用大量的 null 检查来确保属性已定义，这样不仅代码很冗长而且可读性和维护性也很差。
可选链操作符的高级用法
除了基本的属性访问之外，可选链操作符还可以用于数组下标的访问，以及函数的调用。下面我们将介绍这些高级用法。
数组下标访问
可选链操作符 ?. 可以与数组下标一起使用，以便通过数组下标来访问元素。如果元素不存在，则操作符会将整个表达式的值设为 undefined。下面是一个使用可选链操作符访问数组元素的示例：
const data = { items: [{ name: 'item 1' }, { name: 'item 2' }] };
// Without optional chaining
const name = data.items[0] && data.items[0].name;
// With optional chaining
const name = data.items?.[0]?.name;在上面的示例中，我们使用了可选链操作符来访问数组元素，并且可以在访问数组下标时也使用可选链操作符。
函数调用
当调用一个函数时，如果函数未定义，则这个函数调用表达式会被认为是 undefined。使用可选链操作符 ?. 可以避免出现这种情况。下面是一个使用可选链操作符调用函数的示例：
const obj = { foo: () => 'bar' };
// Without optional chaining
const result = obj.foo && obj.foo();
// With optional chaining
const result = obj.foo?.();在上面的示例中，我们使用可选链操作符来调用函数，从而避免出现函数未定义的问题。
可选链操作符的注意事项
使用可选链操作符时，需要注意以下几点：
- 可选链操作符只能用于访问属性、数组下标和函数调用的情况，不能用于其他表达式。
- 可选链操作符只能与点号
. 和方括号[]` 一起使用，不能与其他运算符一起使用。 - 可选链操作符只能用于某个属性或方法是否存在的判断，不能用于判断属性或方法的值是否为
null或false。
总结
可选链操作符是 ECMAScript 2019 中的一个新特性，为我们提供了一种更优雅和简单的方式来避免出现 TypeError 异常。在本文中，我们介绍了可选链操作符的基本和高级用法，并且提醒了在使用可选链操作符时需要注意的情况。我们希望这篇文章可以帮助你更好地理解和使用可选链操作符来优化代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6486c64c48841e989454e426