JavaScript嵌套解构需结构完全匹配目标对象，用{}表对象、[]表数组，配合默认值（如= {}）防undefined报错，支持混合嵌套、别名及函数参数简化。

JavaScript 中用嵌套解构提取多层嵌套的 JSON 数据，核心是让解构语法的结构和目标对象的嵌套结构完全匹配，同时合理使用默认值和空值防护避免报错。

基础嵌套解构：层级对齐写法

解构时，大括号 {} 表示对象，方括号 [] 表示数组，按实际数据结构逐层展开即可。例如：

假设你有如下 JSON：

const data = {
  user: {
    profile: {
      name: "Alice",
      address: { city: "Beijing", zip: "100000" }
    }
  },
  tags: ["web", "js"]
};

你可以这样一次性提取深层字段：

立即学习“Java免费学习笔记（深入）”；

const {
  user: {
    profile: {
      name,
      address: { city, zip }
    }
  },
  tags: [firstTag, secondTag]
} = data;

执行后：name === "Alice"，city === "Beijing"，firstTag === "web"。

防报错：给中间层级加默认空对象

如果某一层可能为 undefined（比如后端字段缺失），直接解构会报错 Cannot destructure property 'xxx' of undefined。解决方法是在每一级可能为空的对象后加 = {}：

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

const {
  user = {},
  user: { profile = {} } = {},
  user: { profile: { name = "Anonymous", address = {} } = {} } = {},
  user: { profile: { address: { city = "Unknown" } = {} } = {} } = {}
} = data;

这样即使 data.user 不存在，也不会中断执行，所有变量都会取默认值。

混合数组与对象：灵活组合解构

遇到数组里包对象、对象里包数组的情况，照结构写就行。例如：

const apiResponse = {
  results: [
    { id: 1, meta: { status: "active" } },
    { id: 2, meta: { status: "pending" } }
  ]
};

提取第一个结果的 id 和 status：

const {
  results: [
    { id: firstId, meta: { status: firstStatus } }
  ] = []
} = apiResponse;

注意：results = [] 是给整个数组设默认值，防止 results 为 undefined；中括号里的解构也支持别名和深层提取。

实用技巧：解构 + 函数参数简化 API 处理

常用于处理接口返回数据，把解构逻辑封装进函数参数，提升可读性：

function handleUser({
  data: {
    user: {
      id,
      settings: { theme = "light", lang = "zh" } = {}
    } = {}
  } = {}
}) {
  console.log(id, theme, lang);
}

调用时传入完整响应对象，函数内部自动提取所需字段，无需层层点取，也不怕中间为 null 或 undefined。