在前端开发中，我们经常需要处理对象的属性值。但是，当对象属性值不存在时，我们就会遇到一些问题，例如代码会抛出错误或者返回 undefined。这时，我们需要使用 Optional Chaining 来解决这些问题。
什么是 Optional Chaining
Optional Chaining 是 ES9（ECMAScript 2019）中引入的一项新特性，它可以在访问对象属性时，判断属性值是否存在。如果属性值不存在，代码不会抛出错误，而是返回 undefined。
如何使用 Optional Chaining
使用 Optional Chaining 很简单，只需要在访问对象属性时，使用问号（?）来判断属性值是否存在即可。下面是一个示例：
// javascriptcn.com 代码示例
const person = {
name: 'John',
age: 30,
address: {
city: 'New York',
street: 'Broadway'
}
};
console.log(person.address?.postcode); // undefined在上面的代码中，我们使用 Optional Chaining 来访问 person.address.postcode 属性。由于 address 属性存在，代码不会抛出错误，并返回 undefined。
使用 Optional Chaining 解决 BUG
在实际开发中，我们经常会遇到对象属性值不存在的 BUG。下面是一个示例：
const person = {
name: 'John',
age: 30
};
console.log(person.address.postcode); // TypeError: Cannot read property 'postcode' of undefined在上面的代码中，我们尝试访问 person.address.postcode 属性。由于 address 属性不存在，代码抛出 TypeError 错误。
如果我们使用 Optional Chaining 来解决这个问题，代码就会变得更加健壮：
const person = {
name: 'John',
age: 30
};
console.log(person.address?.postcode); // undefined在上面的代码中，我们使用 Optional Chaining 来访问 person.address.postcode 属性。由于 address 属性不存在，代码返回 undefined，而不是抛出错误。
使用 Optional Chaining 嵌套访问
在实际开发中，我们经常需要嵌套访问对象属性。下面是一个示例：
// javascriptcn.com 代码示例
const person = {
name: 'John',
age: 30,
address: {
city: 'New York',
street: 'Broadway'
}
};
console.log(person.address.city); // New York
console.log(person.address.postcode); // TypeError: Cannot read property 'postcode' of undefined在上面的代码中，我们尝试访问 person.address.postcode 属性。由于 address 属性存在，但 postcode 属性不存在，代码抛出 TypeError 错误。
如果我们使用 Optional Chaining 来解决这个问题，代码就会变得更加健壮：
// javascriptcn.com 代码示例
const person = {
name: 'John',
age: 30,
address: {
city: 'New York',
street: 'Broadway'
}
};
console.log(person.address?.postcode); // undefined在上面的代码中，我们使用 Optional Chaining 来访问 person.address.postcode 属性。由于 address 属性存在，但 postcode 属性不存在，代码返回 undefined。
总结
Optional Chaining 是 ES9 中引入的一项新特性，它可以在访问对象属性时，判断属性值是否存在。如果属性值不存在，代码不会抛出错误，而是返回 undefined。使用 Optional Chaining 可以使代码更加健壮，并避免 BUG 的出现。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656bed6ad2f5e1655d446fd5