在前端开发中，我们经常需要访问对象的属性或方法。但是，当对象的属性或方法不存在时，我们可能会遇到 undefined 的问题。这种情况下，如果我们没有进行判断，就有可能出现程序崩溃的情况。为了避免这种情况的发生，ECMAScript 2020 引入了可选链操作符，可以帮助我们避免 undefined 误判。
什么是可选链操作符
可选链操作符是 ECMAScript 2020 新增的一种语法，用于访问对象的属性或方法时，可以避免出现 undefined 的情况。在使用可选链操作符时，如果对象的属性或方法不存在，它会返回 undefined 而不会抛出异常。
可选链操作符的语法如下：
obj?.prop // 访问 obj.prop 属性 obj?.[expr] // 访问 obj[expr] 属性 func?.(args) // 调用 func(args) 函数
其中，问号（?）表示可选链操作符。
如何使用可选链操作符
下面我们通过示例代码来介绍如何使用可选链操作符。
访问对象属性
假设我们有一个对象 person，它有一个属性 name。我们想要访问 person.name 属性，但是我们不确定 person 是否存在。这时，我们可以使用可选链操作符来避免 undefined 误判。
const person = { age: 20 };
// 不使用可选链操作符
const name = person.name; // 报错，person.name 为 undefined，无法访问属性
// 使用可选链操作符
const name = person?.name; // 不会报错，name 的值为 undefined访问对象方法
假设我们有一个对象 calculator，它有一个方法 add。我们想要调用 calculator.add(1, 2) 方法，但是我们不确定 calculator 是否存在。这时，我们可以使用可选链操作符来避免 undefined 误判。
const calculator = { subtract: (a, b) => a - b };
// 不使用可选链操作符
const result = calculator.add(1, 2); // 报错，calculator.add 为 undefined，无法调用方法
// 使用可选链操作符
const result = calculator?.add(1, 2); // 不会报错，result 的值为 undefined访问数组元素
假设我们有一个数组 list，它有一个元素 0。我们想要访问 list[0] 元素，但是我们不确定 list 是否存在。这时，我们可以使用可选链操作符来避免 undefined 误判。
const list = [1, 2, 3]; // 不使用可选链操作符 const item = list[0]; // 报错，list 为 undefined，无法访问元素 // 使用可选链操作符 const item = list?.[0]; // 不会报错，item 的值为 1
总结
可选链操作符是 ECMAScript 2020 新增的一种语法，用于避免 undefined 误判。在访问对象的属性、方法或数组的元素时，我们可以使用可选链操作符来避免出现 undefined 的情况。这样可以提高程序的健壮性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6570f2bbd2f5e1655d99bb1c