JavaScript 中可选链运算符怎么安全访问可能为空的数组索引-js教程-PHP中文网

可选链操作符?.用于安全访问可能为空或结构不稳定的数组及属性，如a?.[0]防空数组，a?.[0]?.name防首项为空，配合??提供默认值，避免null/undefined报错。

javascript 中可选链运算符怎么安全访问可能为空的数组索引

用 a?.[0] 或 a[0]?.prop 就能安全访问可能为空或结构不稳定的数组索引，核心是把可选链放在“对象存在性”或“元素存在性”的关键节点上。

访问数组首项本身（防空数组）

当数组变量 a 可能为 null、undefined 或空数组时，直接写 a[0] 会出错或返回 undefined，但不够明确。应使用：

a?.[0]：先检查 a 是否存在且为数组（或类数组），再取第 0 项；若 a 为空值，整个表达式直接返回 undefined，不报错
注意写法：不能写成 a?.[0] 或 a?.[0].foo（缺少中间的 ?.）；如果还要读首项的属性，得接续 ?.，比如 a?.[0]?.name

读取首项的属性（防首项为 null/undefined）

即使数组非空，首项也可能为 null 或 undefined（例如 [null, {name: 'Bob'}]）。此时仅用 a?.[0] 不够，需进一步防护：

sc-java-to-ts-interface

将后端 Java 接口文档转换为前端 TypeScript 类型定义（interface / type）。输入：飞书文档、Spring Boot 接口文档、Swagger/OpenAPI、手写 API 文档等。输出：包含请求参数与响应结果的 .md 文件，含完整 JSDoc 注释。触发关键词：Java 转 TS、接口转换、生成前端类型、接口文档转 TypeScript、DTO/VO/BO 转 interface、后端文档转前端类型、生成接口类型、类型定义生成。

下载

a?.[0]?.name：先确保 a 存在，再取 [0]，再确保该元素存在，才读 name
对比错误写法：a?.[0].name —— 若 a[0] 是 null，仍会报 Cannot read property 'name' of null
常见场景：API 返回列表中第一项结构不确定，如 res?.data?.users?.[0]?.avatar

配合空值合并提供默认值

可选链只负责“不报错”，真正要兜底显示内容，需搭配 ?? 操作符：

const title = list?.[0]?.title ?? '暂无标题'：既避开空数组/空元素报错，又避免最终结果是 undefined 时显示空白
别用 || 替代 ??：如果 title 是 '' 或 0，|| 会误触发默认值，而 ?? 只对 null 和 undefined 生效