【js篇】如何提取高度嵌套对象中的指定属性？

LuckySusu
87 阅读2分钟

在 JavaScript 开发中，经常会遇到深度嵌套的对象结构。例如从 API 接口中返回的数据、配置文件、状态树等，都可能包含多层嵌套。如果我们想从中提取某个深层属性，如果不掌握正确的解构方式，代码就会显得冗长而低效。

✅ 一句话总结

可以通过嵌套解构语法（使用冒号 : 和对象结构），一行代码提取出嵌套对象中任意层级的属性值。

✅ 一、问题背景

假设我们有如下一个嵌套对象：

const school = {
  classes: {
    stu: {
      name: 'Bob',
      age: 24,
    }
  }
};

我们想获取 name 属性（它嵌套了三层），如果直接写：

const { name } = school; // undefined

📌 结果是 undefined，因为 school 对象本身没有 name 这个属性。

✅ 二、常规做法：逐层解构

最基础的方式是逐层提取：

const { classes } = school;
const { stu } = classes;
const { name } = stu;

console.log(name); // 'Bob'

✅ 优点：

  • 逻辑清晰；
  • 初学者容易理解；

❌ 缺点：

  • 冗余代码较多；
  • 不适合快速提取或函数参数中使用；

✅ 三、高级做法：嵌套解构一行搞定

利用对象解构的嵌套特性，我们可以直接写成：

const { classes: { stu: { name } } } = school;
console.log(name); // 'Bob'

📌 解析：

  • classes: 表示从 school.classes 中继续解构；
  • { stu: { name } } 表示再往下一层取 stu 对象，并从中提取 name；
  • 整体相当于“从 school.classes.stu.name 提取到变量 name”。

✅ 四、配合默认值使用（避免 undefined）

如果某一层属性可能不存在，可以加上默认值防止报错：

const {
  classes: {
    stu: { name = 'Unknown' } = {}
  } = {}
} = school;

console.log(name); // 'Bob' 或者默认值 'Unknown'

📌 特点：

  • 给每一层可能为 undefined 的结构设置默认空对象；
  • 防止在未定义属性上进行解构导致错误（如 Cannot destructure property 'stu' of 'undefined'）；

✅ 五、结合函数参数使用

嵌套解构非常适合用于函数参数，使代码更简洁清晰：

function printStudentName({ classes: { stu: { name } } }) {
  console.log(`学生姓名：${name}`);
}

printStudentName(school); // 学生姓名：Bob

✅ 六、一句话总结

使用对象嵌套解构语法，可以通过 obj: { nestedObj: { targetProp } } 的形式，精准提取嵌套对象中任意层级的属性，不仅代码简洁，还能提高可读性和开发效率。

💡 进阶建议

  • 在 React/Vue 状态管理中，常用于从 Redux Store 或 props 中提取深层数据；
  • 使用 TypeScript 可以对嵌套结构进行类型标注，提升类型安全性；
  • 避免过度嵌套，影响代码可维护性；
  • 可以结合 Lodash 的 get 方法实现更安全的属性访问：_.get(school, 'classes.stu.name', 'default')；
avatar
文章
阅读
粉丝