空值安全模拟器 - JS可选链与默认值测试

可选链操作符 ?. 是 ES2020 引入的语法，用于安全地访问深层嵌套的对象属性。

当访问链中某个中间值为 null 或 undefined 时，表达式会短路返回 undefined，而不是抛出 TypeError。

语法形式：

• obj?.prop — 安全访问属性
• obj?.[expr] — 安全访问动态属性
• fn?.() — 安全调用函数
• arr?.[index] — 安全访问数组索引

示例：

// 不用可选链
const city = user && user.profile && user.profile.address && user.profile.address.city;
// 使用可选链
const city = user?.profile?.address?.city; // 安全、简洁

空值合并操作符 ?? 也是 ES2020 引入的。当左侧值为 null 或 undefined 时返回右侧的默认值。

与逻辑或 || 的关键区别：

?? 只把 null 和 undefined 视为空值，而 || 把所有假值都视为空值。

两者经常组合使用，实现安全的深层访问 + 兜底默认值：

// 安全访问 + 默认值
const theme = user?.settings?.theme ?? 'light';

// 等价于
const theme = (user && user.settings && user.settings.theme != null) 
              ? user.settings.theme 
              : 'light';

最佳实践：使用 ?.?? 链可以让代码更健壮、更可读。

可以！可选链支持三种形式：

• obj?.prop — 属性访问
• arr?.[0] — 数组索引访问（安全访问可能为空的数组）
• fn?.() — 函数调用（安全调用可能不存在的函数）

// 安全访问数组
const firstItem = apiResponse?.data?.items?.[0]?.name ?? '未知';

// 安全调用回调
callback?.();  // 如果 callback 为 null/undefined，什么都不发生

// 安全访问动态属性
const val = obj?.[dynamicKey];

可选链 ?. 和空值合并 ?? 在现代浏览器中得到广泛支持：

• Chrome 80+ (2020年2月)
• Firefox 74+ (2020年3月)
• Safari 13.1+ (2020年3月)
• Edge 80+
• Node.js 14+

对于需要兼容旧浏览器的项目，可以使用 Babel 或 TypeScript 进行转译。

可选链的性能开销极小，现代 JS 引擎已对其进行了深度优化。

相比手动编写 && 短路判断，可选链在大多数情况下性能相当甚至更优，因为引擎可以更好地预测和优化这种标准模式。

建议：优先考虑代码可读性和安全性，不要过早优化。在绝大多数场景中，可选链的性能影响可以忽略不计。

不能。可选链只能用于读取操作，不能用于赋值。

// ❌ 错误：可选链不能用于赋值
obj?.prop = 'value';  // SyntaxError

// ✅ 正确：先判断再赋值
if (obj != null) {
  obj.prop = 'value';
}
// 或者
obj && (obj.prop = 'value');

这是因为可选链的设计目的是安全读取，赋值目标必须明确存在。

典型使用场景：

1. API 响应处理：后端返回的数据结构可能不完整
2. 用户配置读取：用户可能未设置某些配置项
3. DOM 操作：元素可能不存在于页面中
4. 第三方数据：外部数据源的结构不可控
5. 深层嵌套对象：避免冗长的 && 链
6. 可选回调：安全调用可能未传入的回调函数

总的来说，任何数据来源不确定的深层访问都适合使用可选链。

TypeScript 从 3.7 版本开始支持可选链，与 JavaScript 语法完全一致：

interface User {
  profile?: {
    address?: {
      city: string;
    };
  };
}
const user: User | null = getUser();
// TypeScript 中安全访问，类型自动推断为 string | undefined
const city = user?.profile?.address?.city ?? '未知城市';

TypeScript 会正确推断可选链结果的类型（自动加上 | undefined），配合 ?? 可以精确控制最终类型。