在前端开发中，我们经常需要处理复杂的嵌套对象。在过去，我们通常使用 if 语句或三元运算符来判断对象的属性是否存在，以避免出现 undefined 错误。但是，这种方式非常繁琐和容易出错。
幸运的是，在 ECMAScript 2021 中，引入了可选链操作符（Optional Chaining Operator），这个新特性可以更加方便地处理嵌套对象。本文将详细介绍可选链操作符的使用方法，并提供一些示例代码以帮助读者更好地理解。
可选链操作符的基本语法
可选链操作符的基本语法如下：
object?.property
其中，object 表示对象，property 表示对象的属性。如果 object 对象存在，则返回 object.property 的值；如果 object 对象不存在，则返回 undefined。
需要注意的是，可选链操作符的 ? 必须紧跟在对象的后面，不能有空格。
示例代码
下面是一些示例代码，演示可选链操作符的使用方法。
示例 1：判断嵌套对象是否存在
假设我们有一个嵌套的对象 person，它包含了一个 address 对象，而 address 对象又包含了一个 city 属性。如果我们想判断 city 属性是否存在，可以使用可选链操作符：
const city = person?.address?.city;
if (city) {
console.log(city);
} else {
console.log('City not found');
}在上面的代码中，我们使用了两个可选链操作符：person?.address?.city。如果 person 对象或 address 对象不存在，那么 city 变量将会是 undefined。如果 city 存在，那么我们可以将其输出到控制台；否则，我们将输出一条错误信息。
示例 2：调用嵌套对象的方法
假设我们有一个嵌套的对象 person，它包含了一个 address 对象，而 address 对象又包含了一个 getCity() 方法。如果我们想调用 getCity() 方法并获取返回值，可以使用可选链操作符：
const city = person?.address?.getCity?.();
if (city) {
console.log(city);
} else {
console.log('City not found');
}在上面的代码中，我们使用了三个可选链操作符：person?.address?.getCity?.()。如果 person 对象、address 对象或 getCity() 方法不存在，那么 city 变量将会是 undefined。如果 city 存在，那么我们可以将其输出到控制台；否则，我们将输出一条错误信息。
示例 3：更新嵌套对象的属性
假设我们有一个嵌套的对象 person，它包含了一个 address 对象，而 address 对象又包含了一个 city 属性。如果我们想更新 city 属性的值，可以使用可选链操作符：
person?.address?.city = 'New York';
在上面的代码中，我们使用了两个可选链操作符：person?.address?.city。如果 person 对象或 address 对象不存在，那么这行代码将不会执行。如果 city 存在，那么它的值将会被更新为 'New York'。
总结
可选链操作符是一个非常实用的新特性，它可以帮助我们更加方便地处理嵌套对象。在使用可选链操作符时，需要注意语法和代码逻辑的正确性，以避免出现错误。希望本文能够帮助读者更好地理解可选链操作符的使用方法，并提供一些实用的示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6619edf5d10417a222aa39b1