在前端开发中，我们经常需要用到 JavaScipt 操作浏览器的 DOM 元素或数据等，但是当 DOM 元素或数据不存在时，JS 代码会出现错误，导致程序终止执行。为了解决这个问题，ECMAScript 2021 中推出了可选链操作符 (?.)，该操作符可以在安全的情况下访问对象的属性或方法，避免了出现 TypeError 错误。本文将详细介绍可选链操作符的使用方法和示例代码。
可选链操作符 (?.) 的基本语法
可选链操作符使用问号（?）和点号（.）分割开来，语法格式如下：
object?.property object?.method() object?.[property]
其中，object 是需要访问的对象；property 是需要访问的属性；method 是需要访问的方法。
该语法表示通过对象访问属性或调用方法时，如果对象或属性或方法不存在，则不会出现错误，直接返回 undefined。
可选链操作符示例代码
- 访问对象属性
const user = {
name: '张三',
age: 18,
favorite: {
sport: '足球',
food: '巧克力'
}
};
// user 对象中有 favorite 属性，可以正常输出
console.log(user.favorite.sport); // "足球"
// user 对象中没有 hobby 属性，会出现 TypeError 错误
console.log(user.hobby.color); // TypeError: Cannot read property 'color' of undefined
// 使用可选链操作符 (?.)，当 hobby 属性不存在时，不会出现错误，直接返回 undefined
console.log(user.hobby?.color); // undefined- 调用对象方法
const user = {
name: '张三',
age: 18,
sayHi() {
console.log(`大家好，我叫 ${this.name}，我今年 ${this.age} 岁。`);
}
};
// user 对象中有 sayHi 方法，可以正常输出
user.sayHi(); // "大家好，我叫 张三，我今年 18 岁。"
// user 对象中没有 eat 方法，会出现 TypeError 错误
user.eat(); // TypeError: user.eat is not a function
// 使用可选链操作符 (?.)，当 eat 方法不存在时，不会出现错误，直接返回 undefined
user.eat?.(); // undefined- 访问对象属性（使用数组下标）
const foods = ['鸡蛋', '豆腐', '小咸菜']; // foods 数组中有第 1 个元素，不会出现错误 console.log(foods[0]); // "鸡蛋" // foods 数组中没有第 4 个元素，会出现 TypeError 错误 console.log(foods[3]); // TypeError: Cannot read property '3' of undefined // 使用可选链操作符 (?.)，当第 4 个元素不存在时，不会出现错误，直接返回 undefined console.log(foods[3]?.color); // undefined
可选链操作符在 React 中的应用
在 React 组件开发中，我们经常需要访问 props 对象的属性值。如果某个属性不存在，会导致程序终止执行，为了避免这种情况，我们可以使用可选链操作符来访问 props 对象属性：
function Component(props) {
return (
<div>
<p>姓名：{props.user?.name}</p>
<p>年龄：{props.user?.age}</p>
</div>
);
}
// 渲染组件时，传递的 props 对象中没有 user 属性，不会报错
ReactDOM.render(<Component />, document.getElementById('root'));总结
可选链操作符是 ECMAScript 2021 中新增的功能，可以在安全的情况下访问对象的属性或方法，避免了出现 TypeError 错误。在 React 组件开发中，可选链操作符可以避免访问 props 对象属性时出现错误。大家在开发中可以灵活运用可选链操作符，提升代码健壮性和稳定性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a8e554add4f0e0ff225aa7