javascript的可选链操作符（`?.`）提供了一种安全访问对象属性或调用函数的方式。当尝试访问的属性或方法所属对象为`null`或`undefined`时，它会短路并返回`undefined`，而非抛出错误，从而增强了代码的健壮性和可读性。
在现代JavaScript开发中，我们经常需要处理来自不同源的数据，这些数据结构可能不总是完全一致，或者某些属性可能缺失。直接访问一个不存在的属性或对null/undefined值进行属性访问，会导致程序抛出TypeError，中断执行。可选链操作符（Optional Chaining）正是为了解决这一痛点而引入的ES2020（ES11）新特性。
什么是可选链操作符（?.）？
可选链操作符（?.）允许开发者在尝试访问一个可能为null或undefined的对象的属性或方法时，不必进行冗长的null或undefined检查。如果链中的某个引用是null或undefined，表达式会立即短路并返回undefined，而不是抛出错误。
它的基本语法有以下几种形式：
- obj?.prop：访问对象属性。
- obj?.[expr]：使用方括号语法访问对象属性。
- func?.()：调用可能不存在的函数。
为什么需要可选链？
在可选链操作符出现之前，为了安全地访问深层嵌套的属性，我们通常需要编写一系列的条件判断，例如：
立即学习“Java免费学习笔记（深入）”；
// 传统方式，没有可选链
const user = {
profile: {
address: {
street: 'Main St'
}
}
};
// 假设profile或address可能不存在
let streetName;
if (user && user.profile && user.profile.address) {
streetName = user.profile.address.street;
} else {
streetName = undefined; // 或者其他默认值
}
console.log(streetName); // Main St
const anotherUser = {};
let anotherStreetName;
if (anotherUser && anotherUser.profile && anotherUser.profile.address) {
anotherStreetName = anotherUser.profile.address.street;
} else {
anotherStreetName = undefined;
}
console.log(anotherStreetName); // undefined这种方式代码冗长且可读性差。而有了可选链，代码将变得简洁明了：
// 使用可选链
const user = {
profile: {
address: {
street: 'Main St'
}
}
};
const streetName = user?.profile?.address?.street;
console.log(streetName); // Main St
const anotherUser = {};
const anotherStreetName = anotherUser?.profile?.address?.street;
console.log(anotherStreetName); // undefined实际应用示例
我们以一个常见的场景为例：从URL查询字符串中提取特定参数。
假设我们有一个URL，其中可能包含type参数，我们想获取它的值。
const { search } = useLocation(); // 假设useLocation()返回当前URL的location对象，search属性为查询字符串
// search 可能是 "?param1=value1&type=someType" 或者只是 "?param1=value1"
const match = search.match(/type=(.*)/);
// 如果search字符串中包含"type="，match将是一个数组，如 ["type=someType", "someType", index: ..., input: ..., groups: ...]
// 如果search字符串中不包含"type="，match将是 null现在，我们想获取匹配到的type值，它通常位于match数组的第二个元素（索引为1）。
没有可选链的情况：
如果search字符串不包含type参数，那么match变量将是null。此时，尝试直接访问match[1]会抛出TypeError：
const search = "test"; // 模拟一个不包含"type="的查询字符串
const match = search.match(/type=(.*)/); // 此时 match 为 null
// 尝试访问 match[1] 会导致错误
try {
const type = match[1];
console.log(type);
} catch (error) {
console.error("发生错误:", error.message); // 输出: 发生错误: Cannot read properties of null (reading '1')
}使用可选链的情况：
通过在match变量后使用可选链操作符?.，我们可以安全地访问其属性：
const search = "test"; // 模拟一个不包含"type="的查询字符串 const match = search.match(/type=(.*)/); // 此时 match 为 null const type = match?.[1]; // 使用可选链安全访问 console.log(type); // 输出: undefined
在这个例子中，当match为null时，match?.[1]表达式会短路，直接返回undefined，而不是抛出错误。这使得代码更加健壮，无需额外的if (match)判断。
注意事项与最佳实践
并非替代所有null检查：可选链主要用于处理“可能不存在”的属性或方法。如果某个属性或对象在逻辑上是“必须存在”的，并且其缺失表示程序错误，那么直接抛出错误（不使用可选链）可能更合适，以便及时发现并修复问题。
-
与空值合并操作符（??）结合使用：可选链返回undefined时，可以与空值合并操作符（??）结合，为缺失的值提供一个默认值。
const user = {}; const userName = user?.profile?.name ?? 'Guest'; console.log(userName); // Guest -
函数调用：可选链也可用于安全地调用可能不存在的函数。
const obj = { method: () => console.log('Method called!') }; obj.method?.(); // 输出: Method called! const anotherObj = {}; anotherObj.method?.(); // 不会报错，也不会执行任何操作 避免过度使用：虽然可选链很方便，但过度使用可能掩盖数据结构设计问题。在某些情况下，通过类型检查或数据预处理来确保数据完整性可能更优。
总结
可选链操作符（?.）是JavaScript中一个强大且实用的新特性，它极大地简化了对可能为null或undefined的对象属性和方法的访问。通过减少冗余的条件判断，它提高了代码的简洁性、可读性和健壮性，是现代JavaScript开发中不可或缺的工具。掌握并合理运用可选链，能够帮助我们编写出更加优雅和可靠的代码。
