在前端开发中，我们常常需要处理从后台返回的数据。而有些数据可能是不存在的，如果直接访问不存在的数据，就会出现 undefined 的错误，导致程序崩溃。为了解决这个问题，在 ECMAScript 2021 (ES12) 中引入了可选链操作符。
使用可选链操作符，可以很方便地判断是否存在某个属性或方法，而不用担心出现 undefined 的错误。接下来，本文将详细介绍可选链操作符的用法，并给出一些示例代码。
基本语法
可选链操作符 ?. 是一个连字符和问号的组合，可以和其他操作符一起使用，表示如果访问的对象不存在，则不会出现错误，而是返回 undefined。
下面是可选链操作符的语法示例：
object?.property object?.method() object?.[property]
其中，object 表示要访问的对象，property 表示要访问的属性，method() 表示要调用的方法，[property] 表示使用动态的属性名。
使用示例
假设我们有一个对象 user，包含了用户的姓名 (name) 和地址 (address) 信息。但是，有的用户没有填写地址信息，导致 user.address 为 undefined。在这种情况下，如果我们直接访问 user.address.street，就会出现 TypeError: Cannot read property 'street' of undefined 的错误。
为了避免出现上述错误，我们可以使用可选链操作符来判断是否存在 user.address，如果存在则访问 user.address.street，否则返回 undefined。具体代码如下：
const streetName = user.address?.street;
上述代码等同于下面的代码：
const streetName = user.address === null || user.address === undefined ? undefined : user.address.street;
另外，可选链操作符可以和其他操作符一起使用，例如 nullish coalescing 运算符：
const city = user.address?.city ?? 'Beijing';
上述代码等同于下面的代码：
const city = user.address === null || user.address === undefined ? 'Beijing' : user.address.city;
最后，可选链操作符也可以使用在数组中：
const item = arr?.[index];
上述代码等同于下面的代码：
const item = arr === null || arr === undefined ? undefined : arr[index];
注意事项
需要注意的是，可选链操作符不能用在声明变量时的左侧，例如：
const str?.length; // SyntaxError: Unexpected token '.'
正确的语法应该是：
const strLength = str?.length;
此外，可选链操作符只能用于访问对象的属性或方法，不能用来访问变量或对象本身：
const obj?.prop; // SyntaxError: Invalid or unexpected token const obj?.method(); // SyntaxError: Invalid or unexpected token
结论
可选链操作符是 ECMAScript 2021 (ES12) 中很实用的新增语法。通过使用可选链操作符，我们可以避免访问不存在的属性或方法时出现 undefined 的错误，代码更加简洁、安全、可读性更强。在实际应用中，我们应该适时地使用可选链操作符，提升程序的稳定性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67211bd42e7021665e0657f8