在前端开发过程中，我们经常需要访问对象的属性或方法，但是有些对象可能不存在或者属性值为 null 或 undefined，这时候访问属性或方法就会报错。为了解决这个问题，ES12 中引入了 optional chaining 语法，可以简化代码并避免出现错误。
optional chaining 是什么
optional chaining 是一种新的语法，可以在访问对象属性或方法时，避免出现错误。它使用问号（?）来表示对象是否存在，如果对象不存在，则返回 undefined，而不是报错。
例如，如果我们要访问一个对象的属性：
// javascriptcn.com 代码示例
const person = {
name: '张三',
age: 18,
address: {
city: '北京',
street: '朝阳区'
}
};
console.log(person.address.city);如果 person 对象不存在，或者 address 对象不存在，都会导致代码出错。使用 optional chaining 语法，可以避免这种情况：
console.log(person?.address?.city);
如果 person 对象不存在，或者 address 对象不存在，都会返回 undefined，不会报错。
optional chaining 的使用
optional chaining 的语法很简单，就是在属性或方法后面加上问号（?）：
object?.property object?.method()
如果对象存在，则访问属性或方法，否则返回 undefined。
我们可以使用 optional chaining 来简化代码，例如：
// javascriptcn.com 代码示例
const person = {
name: '张三',
age: 18,
address: {
city: '北京',
street: '朝阳区'
}
};
const city = person?.address?.city ?? '未知城市';
console.log(city);如果 person 对象或 address 对象不存在，city 变量就会被赋值为 '未知城市'，而不是报错。
optional chaining 的注意事项
使用 optional chaining 语法时，需要注意一些细节：
- 只有在对象存在时才能使用 optional chaining，否则会报错。
- 只有在访问属性或方法时才能使用 optional chaining，不能在赋值语句中使用。
- optional chaining 只能处理对象属性或方法不存在的情况，不能处理其他类型的错误。
optional chaining 的兼容性
optional chaining 是 ES12 中的新语法，目前尚未得到所有浏览器的完全支持。如果需要在旧浏览器中使用 optional chaining，可以使用第三方库，例如 lodash 或者 babel 插件等。
总结
optional chaining 是一种非常实用的语法，可以避免代码中因为对象不存在而导致的错误，简化代码并提高代码的健壮性。在实际开发中，我们应该充分利用 optional chaining，写出更加健壮和高效的代码。
示例代码
// javascriptcn.com 代码示例
const person = {
name: '张三',
age: 18,
address: {
city: '北京',
street: '朝阳区'
}
};
const city = person?.address?.city ?? '未知城市';
console.log(city);来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65698cf9d2f5e1655d21e1da