对象解构是js高频易错核心能力，速查手册聚焦真实踩坑场景：基础解构（变量名一致最简）、重命名解构（冒号改名防冲突）、默认值仅对undefined生效、嵌套解构需配空对象默认值防报错。

对象解构不是语法糖，是 JS 开发中高频、易错、又必须掌握的核心能力。写一份实用的速查手册，关键不在罗列所有语法，而在覆盖真实开发中最常踩坑的场景，并给出可直接复制粘贴的写法。

基础解构：变量名与属性名一致时最简写法

这是最常见也最安全的用法，无需重命名，不触发默认值逻辑：

const user = { name: 'Alice', age: 30, city: 'Beijing' };
const { name, age } = user;
// ✅ name === 'Alice', age === 30

重命名解构：用 冒号 + 新变量名 解决命名冲突或语义不清

当属性名不理想（如缩写、下划线命名）或与已有变量同名时必用：

OpenGemini Next.js Bestpractice Builder

使用固定的 Next.js/Tailwind/Prisma 技术栈构建并记录独立 SaaS 项目，仅将 FastAPI 用于 Python 工作负载，并遵循严格的架构规范。

下载

• const { user_name: userName } = data; —— 下划线转驼峰
• const { id: userId, id: orderId } = { id: 123 }; —— ❌ 错误！同一源不能重复解构同一属性两次
• const { id: userId } = user; const { id: orderId } = order; —— ✅ 正确，分属不同对象

默认值解构：只在属性值为 undefined 时生效

注意：null、0、false、'' 都不会触发默认值，这是高频误解点：

const cfg = { timeout: 0, retry: null };
const { timeout = 5000, retry = 3 } = cfg;
// ✅ timeout === 0（不是 5000），retry === null（不是 3）
// ✅ 只有 cfg.timeout === undefined 时，timeout 才取 5000

嵌套解构 + 默认对象：避免访问深层属性时报错

处理 API 返回的深层结构（如 data.user.profile.avatar）时，推荐搭配空对象默认值：

• const { user = {} } = data;
• const { profile = {} } = user;
• const { avatar = '/default.png' } = profile;
• 合并写法：const { user: { profile: { avatar = '/default.png' } = {} } = {} } = data;

最后一行虽略长，但一行搞定三层安全访问，生产环境值得采用。