在前端开发中，我们经常需要处理数据对象的属性访问，但是有时候我们无法确定一个属性是否存在，这时候就需要使用 Optional Chain 方法。ES12 中引入了 Optional Chain 方法，它可以大大节约我们的开发成本，让我们更加高效地处理数据对象的属性访问。
Optional Chain 方法简介
Optional Chain 方法是一种安全的属性访问方式，它可以避免在访问对象属性时出现错误。在传统的属性访问方式中，如果一个属性不存在，那么访问该属性就会报错。而 Optional Chain 方法则可以判断一个属性是否存在，如果存在就返回该属性的值，否则返回 undefined，避免了代码出错的情况。
下面是一个使用 Optional Chain 方法的示例代码：
// javascriptcn.com 代码示例
const obj = {
person: {
name: 'Alice',
age: 20,
},
};
const name = obj.person?.name;
const address = obj.person?.address?.city;
console.log(name); // 'Alice'
console.log(address); // undefined在上面的代码中，我们使用了 Optional Chain 方法来访问对象属性。如果 person 对象不存在，那么访问 name 属性时就会返回 undefined。同样的，如果 person 对象存在但是没有 address 属性，那么访问 address.city 属性时也会返回 undefined。
Optional Chain 方法的使用场景
Optional Chain 方法主要适用于访问嵌套的对象属性。在实际开发中，我们经常需要处理嵌套的数据结构，例如 JSON 数据或者嵌套的组件属性。如果一个属性不存在，那么访问该属性就会出现错误，使用 Optional Chain 方法就可以避免这种情况的发生。
下面是一个使用 Optional Chain 方法的场景示例：
// javascriptcn.com 代码示例
const data = {
user: {
name: 'Alice',
age: 20,
address: {
city: 'Shanghai',
street: 'Nanjing Road',
},
},
};
function getUserCity(data) {
return data?.user?.address?.city ?? 'Unknown';
}
console.log(getUserCity(data)); // 'Shanghai'
console.log(getUserCity({})); // 'Unknown'在上面的代码中，我们定义了一个函数 getUserCity，它使用了 Optional Chain 方法来访问嵌套的对象属性。如果一个属性不存在，那么函数就会返回 undefined。使用 ?? 运算符可以给返回值设置默认值，避免了代码出错的情况。
Optional Chain 方法的指导意义
Optional Chain 方法可以提高代码的健壮性和可读性，避免了因为属性不存在而导致的代码出错。它可以让我们更加高效地处理嵌套的数据结构，提高了开发效率。
在实际开发中，我们应该尽可能地使用 Optional Chain 方法来访问嵌套的对象属性。这样可以让代码更加健壮和可读，避免了因为属性不存在而导致的代码出错。同时，我们也应该熟练掌握 Optional Chain 方法的使用方法，避免出现语法错误。
总结
Optional Chain 方法是一种安全的属性访问方式，它可以避免在访问对象属性时出现错误。它适用于访问嵌套的对象属性，可以提高代码的健壮性和可读性，避免了因为属性不存在而导致的代码出错。在实际开发中，我们应该尽可能地使用 Optional Chain 方法来访问嵌套的对象属性，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656ee88ed2f5e1655d73902a