JavaScript可选链操作符（?.）的行为解析与链式应用

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 (不会报错)

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')

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')

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

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 的属性，导致错误。