1. 可选链操作符（?.）基础
可选链操作符（?.）是ES2020引入的一个语法特性，旨在简化对可能为null或undefined的对象属性的访问。在传统的JavaScript中，如果尝试访问一个undefined或null值的属性，会抛出TypeError。
例如：
const user = null;
// console.log(user.address); // Uncaught TypeError: Cannot read properties of null (reading 'address')
const profile = {};
// console.log(profile.data.name); // Uncaught TypeError: Cannot read properties of undefined (reading 'data')使用可选链操作符，可以优雅地处理这种情况：
const user = null;
console.log(user?.address); // undefined (不会报错)
const profile = {};
console.log(profile?.data?.name); // undefined (不会报错)当?.左侧的表达式结果为null或undefined时，整个表达式会立即“短路”（short-circuit），停止后续的属性访问或函数调用，并直接返回undefined。
立即学习“Java免费学习笔记（深入）”；
2. 理解短路机制
短路是理解?.行为的关键。它意味着一旦遇到null或undefined，表达式的求值就会立即停止。
考虑以下两种情况：
2.1 传统点操作符（.）的链式访问
当使用传统的点操作符进行链式属性访问时，如果链条中的任何一个中间环节为null或undefined，后续的属性访问将立即导致TypeError。
let a = {};
console.log(a.n); // undefined
// 尝试访问 undefined 的属性 'n'
// console.log(a.n.n.n.n.n.n.n);
// Uncaught TypeError: Cannot read properties of undefined (reading 'n')在这个例子中，a.n的结果是undefined。接下来，当尝试访问undefined的属性n时，就会抛出TypeError。
2.2 可选链操作符（?.）的短路效应
?.的短路特性使得它在遇到null或undefined时，不仅停止当前属性的访问，而且使整个链式表达式返回undefined。
情况一：仅在起始处使用?.
let a = {};
// a 是一个空对象，不是 null 或 undefined。
// 因此 a?.n 的行为等同于 a.n。
console.log(a?.n); // undefined
// 接下来，a?.n 的结果是 undefined。
// 尝试访问 undefined 的属性 'n'，会抛出 TypeError。
// console.log(a?.n.n.n.n.n.n.n);
// Uncaught TypeError: Cannot read properties of undefined (reading 'n')这里，a本身不是null或undefined，所以a?.n会正常评估为a.n，其结果是undefined。由于?.只作用于紧邻它的左侧操作数，后续的.n操作符是在对一个undefined值进行属性访问，因此会抛出TypeError。这与上述传统点操作符的行为一致。
情况二：链式使用?.
当链条中多个环节都使用?.时，短路效应会贯穿整个链条。
let a = {};
// a.n 的结果是 undefined。
// 此时，a?.n 评估为 undefined。
// 接下来遇到第二个 ?.n，由于其左侧操作数（a?.n 的结果，即 undefined）是 nullish，
// 整个表达式会在这里短路，并返回 undefined。
console.log(a?.n?.n.n.n.n.n.n); // undefined在这个例子中，a.n的结果是undefined。当评估到a?.n?.n时，第一个?.（a?.n）正常评估为undefined（因为a不是null或undefined）。接着，第二个?.（?.n）的左侧操作数是undefined。根据可选链的规则，它会立即短路，使得整个表达式的结果为undefined，而不会继续尝试访问后续的.n属性，从而避免了TypeError。
3. 总结与最佳实践
- ?.只对其紧邻的左侧操作数生效。 如果左侧操作数不是null或undefined，它会像常规的点操作符一样继续求值。
- 短路发生在?.遇到null或undefined时。 一旦发生短路，整个表达式（从短路点到末尾）将返回undefined，不再执行后续的属性访问或函数调用。
- 在链式访问中，仅在可能出现null或undefined的环节使用?.。 如果链条中的某个中间结果可能为null或undefined，且你希望在这种情况下整个表达式安全地返回undefined，那么在该环节之后的所有点操作符都应该改为?.。
示例：
const data = {
user: {
profile: {
name: "Alice"
}
}
};
// 假设 profile 可能不存在
console.log(data.user?.profile?.name); // "Alice"
const data2 = {
user: {} // profile 不存在
};
console.log(data2.user?.profile?.name); // undefined (在 profile?.name 处短路)
const data3 = {}; // user 不存在
console.log(data3.user?.profile?.name); // undefined (在 user?.profile 处短路)
// 错误示范：如果 user.profile 可能为 null/undefined，但后续没有 ?.
// const data4 = { user: { profile: null } };
// console.log(data4.user?.profile.name); // TypeError: Cannot read properties of null (reading 'name')
// 解释：data4.user?.profile 评估为 null。后续的 .name 尝试访问 null 的属性，导致错误。通过理解?.的精确短路行为，我们可以更准确地使用它来编写健壮、可读性强的JavaScript代码，有效避免因访问不存在属性而导致的运行时错误。
