在前端开发中，我们经常会处理对象的属性值，而有时候我们需要访问对象的属性，但是又不确定这个属性是否存在。在 ES11 及之前的版本中，我们可以借助三目运算符或者 && 和 || 运算符来判断对象属性的存在性，但是这样的做法不够优雅，代码也不够简洁。因此，ES12 中新增了可选链操作符，使我们的代码逻辑更加清晰，语义更加明确。
可选链操作符
可选链操作符可以在访问一个对象的属性之前，先判断该对象是否为 null 或者 undefined，有则返回该属性值，没有则返回 undefined，并且不会发生 TypeError 错误。可选链操作符的语法如下：
object?.property
其中 object 即要访问的对象，property 即对象的属性。如果 object 存在，则返回 property 值，否则返回 undefined。
示例代码
// javascriptcn.com 代码示例
let person = {
name: 'John',
address: {
city: 'New York',
zipcode: '12345'
}
}
let city = person.address?.city // 'New York'
let state = person.address?.state // undefined在上面的代码中，我们使用可选链操作符来访问 person 对象的 address 属性中的 city 属性，如果 person 对象中的 address 属性不存在，则不会继续访问 city 属性，而是返回 undefined。另外，我们还使用可选链操作符访问了 person 对象中的 address 属性中的 state 属性，由于 address 属性不存在 state 属性，因此返回的结果为 undefined。
当然，如果在实际开发中，我们需要在可选链操作符的基础上，使用条件语句，来处理返回值。下面是一个示例代码：
// javascriptcn.com 代码示例
let person = {
name: 'John',
address: {
city: 'New York',
zipcode: '12345'
}
}
if (person.address?.city) {
console.log(`The person lives in ${person.address.city}`)
} else {
console.log('The person does not have a city')
}
if (person.address?.state) {
console.log(`The person lives in ${person.address.state}`)
} else {
console.log('The person does not have a state')
}在上面的代码中，我们先判断 person 对象中的 address 属性中是否存在 city 属性，如果存在，则输出 The person lives in New York，否则输出 The person does not have a city。同样地，我们还判断了 person 对象中的 address 属性中是否存在 state 属性，由于不存在，因此输出 The person does not have a state。
可选链操作符的指导意义
可选链操作符的新增，可以使我们的代码写法更加优雅、简洁。使用可选链操作符的好处有：
减少代码的冗余性。如前所述，我们在 ES11 及之前的版本中处理对象属性值时，需要使用三目运算符或者 && 和 || 运算符来判断对象属性的存在性，而可选链操作符可以简化这个过程，并且避免不必要的代码冗余。这样可以使我们的代码更加简洁，易于阅读和维护。
提高代码的可读性。使用可选链操作符可以使我们的代码逻辑更加清晰明了。在代码编写过程中，如果需要访问一个对象的属性，并且不确定该属性是否存在，使用可选链操作符可以表达这个逻辑以及处理方式的含义。这样可以使后续的开发者更容易理解代码的含义，从而提高代码的可读性。
降低代码的错误率。使用可选链操作符可以避免我们因为对象属性不存在而导致的 TypeError 错误。这样可以降低代码的错误率，提高代码的质量和可靠性。
总结
可选链操作符是 ES12 中一个十分实用的语法改进，它可以使我们的代码更加优雅、简洁，并提高代码的可读性和质量。同时，使用可选链操作符也需要注意一些细节问题，比如操作符的语法、返回值的处理等等。因此，在日常开发过程中，我们应该积极掌握和应用可选链操作符，以此提升开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652f721c7d4982a6eb09352f