在前端开发中，我们经常需要操作对象，但是当对象为空时，我们可能会遇到 TypeError 的错误。这时，我们可以使用 ECMAScript 2020 的可选链操作符来避免这种错误的发生。
什么是可选链操作符
可选链操作符（Optional Chaining Operator）是 ECMAScript 2020 中新增加的一个操作符，它可以在访问对象的属性或方法时，避免因对象为空而引起的 TypeError。
在使用可选链操作符时，我们可以使用问号（?）来表示当前属性或方法是否存在，如果存在，则返回对应的值或执行对应的方法，如果不存在，则返回 undefined。
如何使用可选链操作符
在使用可选链操作符时，我们需要注意以下几点：
可选链操作符只能用于对象和函数的调用，不能用于基本数据类型（如字符串、数字等）。
可选链操作符只能用于访问对象的属性或方法，不能用于赋值操作。
可选链操作符只能在支持 ECMAScript 2020 的浏览器或 Node.js 环境下使用。
下面是一个示例代码，展示了如何使用可选链操作符：
// javascriptcn.com 代码示例
const user = {
name: '张三',
address: {
city: '北京'
}
};
// 如果 user 存在，则返回 user.name，否则返回 undefined
const userName = user?.name;
// 如果 user 存在且 user.address 存在，则返回 user.address.city，否则返回 undefined
const userCity = user?.address?.city;在上面的示例代码中，我们使用了可选链操作符（?）来避免因对象为空而引起的 TypeError。如果 user 对象存在，则返回对应的属性值，否则返回 undefined。
可选链操作符的指导意义
使用可选链操作符可以帮助我们编写更加健壮的代码，避免因对象为空而引起的 TypeError。在实际开发中，我们经常需要处理一些复杂的对象，有些属性或方法可能存在，有些可能不存在，使用可选链操作符可以让我们更加方便地处理这些情况。
同时，使用可选链操作符也可以让我们的代码更加简洁、易读。在以往的代码中，我们可能需要使用一些复杂的判断语句来处理对象为空的情况，但是使用可选链操作符后，我们可以将这些判断语句简化，代码也更加清晰。
总结
可选链操作符是 ECMAScript 2020 中新增加的一个操作符，它可以在访问对象的属性或方法时，避免因对象为空而引起的 TypeError。使用可选链操作符可以让我们编写更加健壮、简洁、易读的代码，同时也可以提高我们的开发效率。在实际开发中，我们应该适当地使用可选链操作符，避免因对象为空而引起的问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658144a7d2f5e1655dc76700