在开发前端应用时，我们经常需要访问嵌套对象或者数组中的属性或者元素，但是这种情况下有时候属性或者元素可能会不存在，这就会导致程序抛出异常。通常解决这种问题的方式是使用 if...else 语句来检测属性或者元素是否存在，但是这样的代码往往比较冗长，不太优雅。ES10 的可选链操作符（Optional chaining operator）将会为我们解决这个问题，让代码更加简洁。
可选链操作符的基本用法
可选链操作符（?.）是一个新的操作符，表示如果左边的操作符不是null或undefined，则访问右边的属性或者方法；否则返回undefined。具体来说，如果一个对象有一个可能为null或undefined的属性，可以使用可选链操作符来访问。例如：
const user = {
name: 'Alice',
contacts: {
email: 'alice@example.com',
address: {
city: 'New York',
state: 'NY',
},
},
};
console.log(user?.contacts?.address?.city); // New York
console.log(user?.contacts?.phone?.number); // undefined上述代码中，我们使用了可选链操作符来访问user对象的contacts、address和city属性，这三个属性都可能不存在。如果这些属性存在，则返回属性值，否则返回undefined。
可选链操作符的高级用法
可选链操作符不仅可以用于访问属性或者方法，还可以用于调用函数或者构造函数。当我们调用一个可能不存在的函数或者构造函数时，如果不使用可选链操作符，那么会抛出异常。但是使用可选链操作符，如果函数或者构造函数不存在，则返回undefined。例如：
const user = {
name: 'Alice',
getContacts: function() {
return {
email: 'alice@example.com',
address: {
city: 'New York',
state: 'NY',
},
};
},
};
console.log(user?.getContacts()?.address?.city); // New York
console.log(user?.getAddress()?.city); // undefined上述代码中，我们使用了可选链操作符来调用user对象中的getContacts函数。如果getContacts函数不存在，则返回undefined。另外，我们还可以使用可选链操作符来调用构造函数，例如：
const result = json && JSON.parse(json); const result = json?.toJSON?.()?. replace(/\//g, '_')?.replace(/"/g, '')?.slice(0, 100);
上述代码中，我们使用了可选链操作符来调用JSON.parse函数和字符串的replace函数。在使用字符串的replace函数时，可能会引发异常，因为replace函数会返回一个新字符串，如果返回的新字符串上没有replace函数，则会出现异常，但是使用可选链操作符时，如果新字符串为null或undefined，则返回undefined，不会抛出异常。
使用可选链操作符简化 if...else 语句
在ES10以及之前的JavaScript标准中，我们通常使用if...else 语句来判断某个属性或者元素是否存在，如果存在则执行某些操作，否则执行其他操作。例如：
if(user && user.contacts && user.contacts.address && user.contacts.address.city){
console.log(user.contacts.address.city);
}else{
console.log('city不存在');
}上述代码中，我们使用了if...else语句来检测user对象的contacts、address和city属性是否存在，如果存在则打印城市名称，否则打印错误信息。但是这样的代码比较冗长，不太优雅。使用可选链操作符可以让代码更加简洁，例如：
console.log(user?.contacts?.address?.city ?? 'city不存在');
上述代码中，我们使用了可选链操作符和nullish coalescing操作符（??），如果city存在则打印城市名称，否则打印错误信息。这样的代码更加清晰简洁。
总结
可选链操作符是一个很好的语言特性，可以让我们避免繁琐的if...else语句，让代码更加简洁。在日常开发中，我们可以通过可选链操作符来访问对象的属性或者元素，调用对象的方法或者函数，并简化if...else语句。但是需要注意的是，可选链操作符目前只在最新版本的浏览器以及Node.js中支持，并且还不是所有的浏览器都支持。因此，在实际项目开发中需要注意浏览器的兼容性问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b3613badd4f0e0ffc7152c