JavaScript多维数组取值判空 避免类型报错与冗余代码的实现方法

*可选链操作符（?.）*是专门为“嵌套路径不固定、部分层级可能缺失或为null”的取值场景设计的原生JS语法，完全不需要编写大量逐层判空的冗余代码。

具体实现方式 #

• 原有会抛出类型错误的硬路径取值代码：databank[0].selectA.optiond.suba
• 改造后的可选链写法：将每一层路径分隔的.替换为?.，即databank[0]?.selectA?.optiond?.suba

运行逻辑 #

只要取值路径上任意一级的值是null/undefined/字段不存在，整个表达式会直接短路返回undefined，从根源上解决抛出TypeError的问题，不需要手动判断每一层父级对象是否有效。

结合setFeature的传参逻辑 #

直接把带可选链的取值表达式作为参数传入即可，仅需要在setFeature函数内部做一次全局的空值兜底，就可以满足表格渲染的可读性要求。传参时还可以搭配空值合并运算符??使用，当取值结果为null/undefined时，自动替换为统一的占位内容（比如表格常用的短横线'-'），和||不同的是，它不会误伤业务上合法的0、空字符串这类值。
示例写法：

// 无冗余判空的单元格取值传参
const displayValue = setFeature(databank[0]?.selectA?.optiond?.suba ?? '-')

方案优势 #

• 代码改动成本极低：相比原有硬路径写法，仅需要在每一层路径位置增加两个字符，没有额外的逻辑冗余。
• 彻底替代原有的两种冗余实现：原本需要写多行的逐层非空校验、先提取变量再单独判空的逻辑，全部可以用一行可选链表达式替代。
• 兼容说明：如果项目需要支持不支持可选链的老旧浏览器，可通过Babel做语法转译，转译后会自动生成等价的逐层判空逻辑，不影响前端页面正常运行。

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