在前端开发中，我们经常需要访问对象的属性或方法。但是当对象的某些属性或方法不存在时，我们的代码就会出现错误。为了解决这个问题，ES11 提出了可选链操作符（Optional Chaining Operator），可以安全地访问可能不存在的对象层。
可选链操作符的语法
可选链操作符使用问号（?）来表示。它可以在对象属性或方法后面加上问号，表示如果该属性或方法不存在，就不会继续访问下去，而是返回 undefined。
下面是可选链操作符的语法：
obj?.prop // 访问对象的属性 obj?.[expr] // 访问对象的动态属性 func?.(args) // 调用对象的方法
可选链操作符的示例
访问对象的属性
假设有一个对象 person，它有一个 name 属性，但是没有 age 属性。如果我们直接访问 age 属性，就会出现错误：
const person = {
name: 'Tom',
};
console.log(person.age); // TypeError: Cannot read property 'age' of undefined使用可选链操作符可以避免这个错误：
const person = {
name: 'Tom',
};
console.log(person?.age); // undefined访问对象的动态属性
有时候我们需要访问对象的动态属性。使用可选链操作符可以避免访问不存在的动态属性时出现错误。
const person = {
name: 'Tom',
};
const propName = 'age';
console.log(person?.[propName]); // undefined调用对象的方法
使用可选链操作符还可以安全地调用对象的方法。假设有一个对象 obj，它有一个方法 func，但是 obj 可能为 null 或 undefined。如果直接调用 func 方法，就会出现错误：
const obj = null; obj.func(); // TypeError: Cannot read property 'func' of null
使用可选链操作符可以避免这个错误：
const obj = null; obj?.func(); // undefined
可选链操作符的指导意义
使用可选链操作符可以让我们的代码更加健壮。在访问对象的属性或方法时，我们不需要再手动判断对象是否存在，而是可以直接使用可选链操作符，让代码更加简洁清晰。
下面是一个使用可选链操作符的示例：
-- -------------------- ---- -------
----- ------ - -
----- ------
-------- -
----- -----------
--
--
----------------------------------- -- ----------
--------------------------------------- -- ---------在这个示例中，我们使用了可选链操作符访问 person 对象的 address 属性，然后再访问 address 对象的 city 属性。如果 address 属性不存在，就会返回 undefined。
总结
可选链操作符是 ES11 中新增的一个特性，可以安全地访问可能不存在的对象层。使用可选链操作符可以让我们的代码更加健壮，避免出现因为访问不存在的属性或方法而导致的错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ddc0fd1886fbafa4b11234