可选链操作符（?.）不仅适用于对象，也完全支持数组索引访问，如 arr[0]?.foo 可安全读取首元素的 foo 属性，避免因数组为空或首项为 null/undefined 导致的运行时错误。
可选链操作符（`?.`）不仅适用于对象，也完全支持数组索引访问，如 `arr[0]?.foo` 可安全读取首元素的 `foo` 属性，避免因数组为空或首项为 `null`/`undefined` 导致的运行时错误。
在现代 JavaScript（ES2020+）中，可选链操作符 ?. 是处理嵌套访问场景的利器。它不仅能用于对象属性（如 obj?.prop?.nested），同样可直接应用于数组索引表达式——这意味着 a[0]?.foo 是完全合法且推荐的写法，其语义清晰：仅当 a[0] 存在且不为 null 或 undefined 时，才尝试访问其 foo 属性；否则整个表达式短路返回 undefined。
以下是一组典型示例，展示其在不同场景下的安全行为：
// ✅ 正常情况：数组非空，首项含 foo 属性
const arr1 = [{ foo: 'hello' }];
console.log(arr1[0]?.foo); // "hello"
// ✅ 安全兜底：数组为空 → 返回 undefined，不报错
const arr2 = [];
console.log(arr2[0]?.foo); // undefined
// ✅ 安全兜底：首项为 null/undefined
const arr3 = [null, { foo: 'world' }];
console.log(arr3[0]?.foo); // undefined
// ✅ 混合使用：配合函数调用或深层属性
const arr4 = [{ user: { name: 'Alice' } }];
console.log(arr4[0]?.user?.name); // "Alice"
⚠️ 注意事项：
- ?. 不能替代逻辑判断：若需执行副作用（如调用函数、触发警告），仍应显式检查 Array.isArray(a) && a.length > 0；
- 浏览器兼容性需留意：Chrome 80+、Firefox 74+、Safari 13.1+ 原生支持；旧环境需通过 Babel（@babel/plugin-proposal-optional-chaining）转译；
- 不要与括号滥用混淆：a?.[0].foo 是错误写法（?. 后不可紧跟 [），正确形式始终是 a[0]?.foo 或 a?.[0]?.foo（当 a 本身也可能为 null 时）。
总结：a[0]?.foo 是简洁、安全、符合语言规范的最佳实践，显著提升代码健壮性与可读性。在日常开发中，应优先采用可选链替代冗长的三元判断或 if 防御性检查。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
