随着 JavaScript 的迅速发展，新的 ECMAScript 版本不断发布，其中最新的 ECMAScript 2020（简称 ES11）中新增了一项非常有用的特性——可选链。
在以往的 JavaScript 开发中，我们常常需要在访问一个对象或数组的属性或方法时，使用多层的 if 条件判断来确保不会出现 undefined 或 null 等异常情况。而可选链则可以在代码简洁优雅的同时，减少这些冗长且重复的代码。
可选链的语法
可选链的语法非常简单，只需在调用属性或方法的位置添加问号（?）即可，示例如下：
// 传统写法
if (person && person.address && person.address.city) {
console.log(person.address.city);
}
// 可选链写法
console.log(person?.address?.city);如上述代码所示，我们使用传统写法在访问 person 对象中的 address 对象的 city 属性时，需要先判断 person 是否存在，再判断 person.address 是否存在才能调用 person.address.city。而使用可选链写法，只需要在 person、address 的调用位置添加问号（?），即可在任何情况下都安全地调用 city 属性。
可选链的嵌套使用
可选链不仅可以在单个属性或方法的访问上使用，还可以在多层嵌套的结构中使用，例如：
console.log(person?.address?.city?.toUpperCase());
如上述代码所示，在访问嵌套的属性或方法时，只需要在每个访问位置都添加问号（?）即可。如果在访问过程中出现 undefined 或 null 等异常情况，整个表达式会立即返回 undefined。
可选链的使用场景
可选链不仅可以优化嵌套判断的代码，还有许多其他使用场景。以下是一些示例：
使用可选链操作数组
let arr = [1, 2, 3]; console.log(arr?.[2]);
如上述代码所示，在访问数组的某个元素时，只需要使用可选链来判断数组是否存在，即可实现代码简化。
使用可选链代替 try-catch
const name = data?.getUser?.().name ?? 'Guest';
如上述代码所示，在调用函数时，使用可选链可以简化捕获异常的代码，避免使用 try-catch 来处理可能发生的异常情况。
批量判断多个属性
const isValid = data?.name?.length > 0 && data?.age?.length > 0;
如上述代码所示，使用可选链可以批量判断对象中的多个属性是否存在，减少了代码的复杂性和重复性。
注意事项
虽然可选链可以简化代码，但在使用时仍需要注意以下事项：
- 可选链不支持使用 delete 删除属性；
- 可选链不能用于赋值操作；
- 可选链还不是所有浏览器都支持，建议先检查浏览器的兼容性再使用。
总结
可选链是 ECMAScript 2020 中非常值得使用的特性，尤其适合用于访问复杂嵌套的数据结构，能够以简洁的方式消除冗长且重复的代码，提高开发效率。在实际应用中，我们应当根据具体需求来选择是否使用可选链，在保证代码可读性和可维护性的前提下，充分发挥可选链的优势。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65af7fa8add4f0e0ff8f0e4f