解构数组中选取元素时如何规避属性未定义报错？

首先纠正一个常见认知误区：**可选链操作符完全支持数组选择器的未定义判断场景，不存在无法处理的问题，你可以根据使用场景选择以下两种成熟方案：

方案1：可选链+空值合并运算符（现代简洁写法） #

访问数组下标时使用?.[下标]语法即可适配可选链的数组判断逻辑，搭配空值合并运算符??设置兜底值，代码如下：

// 基础写法
const lastChild = content?.[content.length - 1]?.content?.[0]?.text ?? false;

// 搭配Array.at()简化最后一项取值更简洁
const lastChild = content?.at(-1)?.content?.[0]?.text ?? false;

方案优势 #

• 代码量少，取值逻辑一目了然
• 无额外错误捕获开销，性能优于try catch
• 适用于取值链路较短的场景优先选择

兼容性说明 #

目前Chrome 80+、Firefox 72+、Node 14+均原生支持该语法，若需兼容极低版本环境可配合babel转译即可。

方案2：try catch（复杂场景通用方案） #

你写的try catch写法是完全合理可行的。

适用场景 #

• 取值链路很长、需要同时处理多个不确定的取值错误场景
• 兜底逻辑统一，不需要每一步单独做判断
• 取值逻辑本身可能抛出其他异常，需要统一捕获处理的场景

你现有可以直接使用的代码：

let lastChild;
try {
  lastChild = content[content.length - 1].content[0].text;
} catch {
  lastChild = false;
}

内容的提问来源于stack exchange，提问作者msalla