在前端开发中，经常会遇到空数据的情况，例如在请求后台接口时返回的数据可能为空，这时直接调用其中的属性或方法可能会出现 TypeError 的错误。为了解决这个问题，ECMAScript 2020 中添加了可选链（Optional Chaining）运算符，可以有效地规避 null 和 undefined 的问题。
什么是可选链？
可选链是 ECMAScript 2020 中添加的一种运算符，它可以用于访问对象的属性或方法，如果该属性或方法存在则返回对应的值，否则返回 undefined，避免了在访问不存在的属性或方法时出现 TypeError 错误。
可选链的语法形式如下：
object?.prop // 访问对象的属性 object?.[expr] // 访问对象的动态属性 array?.[index] // 访问数组的元素 func?.(args) // 调用函数
其中，?. 是可选链操作符，它的作用是判断左侧的对象是否为 null 或 undefined，如果是，则返回 undefined，否则继续访问其属性或方法。
可选链运算符可以嵌套使用，例如：
object?.prop1?.prop2?.[expr]?.[index]?.func?.(args)
可选链的应用场景
可选链在访问对象的属性或方法时非常实用，特别是在处理复杂的数据结构时更为突出。
1. 避免出现 TypeError 错误
在访问对象的某个属性时，如果该属性不存在，则会返回 undefined，而不是抛出 TypeError 错误。例如：
let message = { // ... }; let user = message.sender?.name;
如果 message.sender 为 null 或 undefined，则 user 变量的值为 undefined，不会出现 TypeError 错误。
2. 检查函数是否存在
使用可选链可以检查对象中是否存在某个方法，从而避免在调用该方法时出现 TypeError 错误。例如：
window.myLibrary?.doSomething();
如果 myLibrary 对象不存在，则调用 doSomething 方法时会返回 undefined，不会出现 TypeError 错误。
3. 避免繁琐的判断
在处理复杂的数据结构时，使用可选链可以避免繁琐的判断，例如：
let result = data?.[0]?.users?.[0]?.name;
如果 data 数组的第一个元素不存在或其 users 属性不存在或 users 中第一个元素不存在，则 result 的值将为 undefined，而不需要进行繁琐的判断。
可选链和 null 判断的比较
在访问对象的属性或方法时，使用可选链和 null 判断都可以解决出现 TypeError 错误的问题。但是，它们之间存在一些区别。
1. 可选链可以解决更复杂的问题
使用可选链可以解决更复杂的问题，特别是在处理嵌套的数据结构时更为实用。
let value = obj?.prop1?.prop2?.[index];
使用可选链可以简化代码，避免繁琐的判断，而使用 if 语句需要编写更多的代码。
let value; if (obj && obj.prop1 && obj.prop1.prop2 && obj.prop1.prop2[index]) { value = obj.prop1.prop2[index]; }
2. 可选链不支持旧版本浏览器
使用可选链需要 ECMAScript 2020 或更高版本的 JavaScript 引擎支持，因此不适用于旧版本的浏览器。而使用 if 语句可以兼容更多的浏览器。
可选链的示例代码
下面是一个使用可选链的示例代码：
let message = { sender: null, // ... }; let userName = message.sender?.name; // undefined
在上面的代码中，如果 sender 属性不存在，则 userName 变量的值为 undefined，不会出现 TypeError 错误。
总结
借助 ECMAScript 2020 中的可选链操作符，我们可以避免在访问对象的属性或方法时出现 TypeError 错误，特别是在处理复杂的数据结构时更为实用。不过，需要注意的是，使用可选链需要 JavaScript 引擎支持，因此不适用于旧版本的浏览器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a39b2548841e9894ffa76c
