JavaScript嵌套对象解构：如何处理缺失的嵌套子对象？

我明白你遇到的困扰了——当item里没有itemChild属性时，直接用嵌套解构会触发Cannot read property 'cat' of undefined的错误，对吧？这是因为虽然你给itemChild设置了默认空对象，但嵌套解构的逻辑是先尝试读取原item中的itemChild，如果它是undefined，会直接报错，不会用到你设置的itemChild = {}默认值。

两种可行的解决方案： #

方案1：给嵌套解构的对象也设置默认值

你可以在嵌套解构的部分，给itemChild的解构目标也加上默认空对象，这样当原item中没有itemChild时，会用空对象来解构cat和age，自然就不会报错了。修改后的代码如下：

const item = { name: "firstItem", color: "red", shape: "square", size: "big" } // 移除了itemChild
let { name, color, shape, size, itemChild = {}, itemChild: { cat = "", age = "" } = {} } = item;
if (itemChild) { 
  console.log("Child", cat, age); 
} else { 
  console.log("Parent", name, color); 
}

这里的关键是itemChild: { cat = "", age = "" } = {}——末尾的= {}确保了当itemChild不存在时，解构的是一个空对象，而不是undefined。

方案2：拆分解构步骤

如果觉得嵌套解构的写法太绕，你可以把解构拆成两步：先解构出itemChild（带默认空对象），再单独解构它的属性。这种写法更直观，也更容易维护：

const item = { name: "firstItem", color: "red", shape: "square", size: "big" } // 移除了itemChild
let { name, color, shape, size, itemChild = {} } = item;
let { cat = "", age = "" } = itemChild; // 从itemChild（空对象）解构属性
if (itemChild) { 
  console.log("Child", cat, age); 
} else { 
  console.log("Parent", name, color); 
}

这种方式下，即使itemChild是空对象，解构cat和age时也会使用默认的空字符串，不会触发任何错误。

这两种方法都能完美解决你遇到的报错问题，你可以根据自己的代码风格选择合适的方式～

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