如何在单步中解构含null值的嵌套API响应对象？

当API返回的对象中嵌套属性address为null时，直接嵌套解构会抛出Cannot read property 'building' of null错误——因为解构的默认值仅在属性为undefined时生效，null不会触发默认值。

单步解构解决方案 #

可以通过先将address的null值转换为空对象，再进行嵌套解构，实现单步完成：

const { name, address: { building, block, street } = {} } = { ...myObject, address: myObject.address ?? {} };

原理说明 #

1. 用扩展运算符...myObject复制原对象，避免修改原始数据
2. 通过空值合并运算符??，将address为null或undefined的情况统一转换为空对象{}
3. 后续的嵌套解构基于转换后的空对象进行，不会再因null触发报错

可选优化：给内部属性设置默认值 #

如果需要在address为空对象时给内部属性设置兜底值，可以进一步调整写法：

const { 
  name, 
  address: { 
    building = '未知楼栋', 
    block = '未知街区', 
    street = '未知街道' 
  } = {} 
} = { ...myObject, address: myObject.address ?? {} };

验证不同场景 #

• 当myObject.address为正常对象时：正常解构出所有属性值
• 当myObject.address为null时：内部属性会使用设置的默认值（或为undefined），无报错
• 当myObject.address为undefined时：效果与null一致，可正常处理

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