第 17 节：对象解构进阶

一、类比板块（往生堂 + MC 基岩版双场景）

（胡桃抱着一叠分层归档的往生堂档案，指尖点着 MC 平板多层 GUI 配置对象，晃着发间梅花轻笑）

各位往生堂学徒、MC 模组创作者，上一节我们学会基础对象解构与变量重命名，但日常写代码总会遇到两类麻烦：档案缺信息、多层嵌套的分类文书，普通基础解构根本处理不了，今天咱们攻克两大进阶用法 —— 解构默认值、嵌套对象解构！

先说往生堂类比：每份往生堂客户档案分基础信息、丧葬套餐两层，属于嵌套文书，对应代码里的嵌套对象。如果客户没填写额外备注，读取备注时就会是空值，解构默认值就相当于堂内预设通用备注 “普通丧葬服务”，自动填充空缺；多层嵌套档案需要逐层拆解，不能直接一次性提取深层信息，就像要先翻开外层档案封皮，才能拿到内层套餐单据。反观旧版 ES2，缺字段要手动写||兜底，多层取值要连续打点，代码冗长还容易出现 “找不到属性” 报错。

切换 MC 基岩版 GUI 脚本场景：我们做商店界面配置时，面板对象里会嵌套子对象存放道具属性、弹窗样式，属于典型嵌套对象；部分道具没有额外特效参数，读取时需要设置默认特效 “无特效”。用本节两种进阶解构语法，不用多层点语法、不用手动判断空值，一行代码完成多层数据提取与缺省兜底，大幅简化 GUI 渲染逻辑。

二、正文板块

1. 对象解构默认值：属性缺失自动填充备用内容

上一节提到，对象不存在对应键名时，解构变量值为undefined，界面渲染会出现空白文本。我们可以在解构变量后用= 默认值设置兜底内容，仅当属性值严格等于 undefined 时，默认值才会生效；null、空字符串、0 均不会触发默认值。

对象基础知识点回看前作教程：https://www.ihuaben.com/book/14226653.html

网页可运行演示代码：

javascript

运行

// 往生堂人物信息，缺少slogan字段

const hutao = {

name: "胡桃",

job: "往生堂主"

};

// 给缺失字段设置默认标语

let { name, job, slogan = "生老病死，天地万象" } = hutao;

console.log(slogan); // 输出默认标语

// 对象包含对应属性，默认值失效

const hutaoFull = {

name: "胡桃",

job: "往生堂主",

slogan: "阴阳有序，命运无常"

};

let { name, job, slogan = "生老病死，天地万象" } = hutaoFull;

console.log(slogan); // 输出对象自带标语

搭配变量重命名 + 默认值综合写法：

javascript

运行

const shopInfo = { title: "往生堂小店" };

let { title: shopTitle, price = 2000 } = shopInfo;

console.log(shopTitle, price);

MC 道具缺参数实战：道具无耐久属性时自动填充默认耐久 64

javascript

运行

const talisman = { propName: "桃木符" };

let { propName, durability = 64 } = talisman;

console.log(durability); // 64

2. 嵌套对象解构：拆解多层级对象数据

实际开发中配置、数据大多是多层嵌套结构，解构时按照对象层级，逐层书写大括号拆解，逐层匹配属性。

单层对象旧写法（多层连续打点，繁琐易报错）：

javascript

运行

const hallConfig = {

panel: {

width: 360,

title: "往生堂商店"

}

};

// ES2老式取值

let width = hallConfig.panel.width;

let title = hallConfig.panel.title;

ES6 嵌套解构一行提取深层属性：

javascript

运行

const hallConfig = {

panel: {

width: 360,

title: "往生堂商店"

}

};

// 嵌套解构，逐层拆解

let { panel: { width, title } } = hallConfig;

console.log(width, title);

重点注意：外层panel仅作为层级匹配标识，不会生成名为 panel 的变量，只有内层 width、title 会被创建。

3. 嵌套解构 + 默认值 组合综合案例

多层对象同时存在缺失字段，嵌套解构内部直接设置默认兜底值：

javascript

运行

const mcGUI = {

mainPanel: {

width: 400

}

};

// 深层title属性缺失，设置默认标题

let { mainPanel: { width, title = "往生堂弹窗" } } = mcGUI;

console.log(title); // 往生堂弹窗

4. MC 基岩版 GUI 嵌套配置完整实操示例

商店面板嵌套道具子配置，使用嵌套解构一次性提取所有参数：

javascript

运行

// MC往生堂商店嵌套配置对象

const shopUI = {

window: {

w: 380,

h: 420

},

item: {

name: "幽冥灯",

stack = 64

}

};

// 嵌套解构提取双层数据

let {

window: { w, h },

item: { name, stack = 64 }

} = shopUI;

console.log("窗口宽：", w, "道具名：", name);

5. 易错避坑要点

默认值仅对undefined生效，若对象属性值为 null、""、0，不会启用兜底内容；

嵌套解构外层层级名称仅用于匹配结构，不会生成对应变量；

若外层嵌套对象本身为 undefined，直接解构深层属性会抛出报错，可在外层设置默认空对象兜底：

javascript

运行

const emptyData = {};

// 外层设置默认空对象，防止报错

let { panel: { title = "空白面板" } = {} } = emptyData;

三、课后练习

基础题

写出控制台输出结果

javascript

运行

const character = { name: "钟离", position: "往生堂客卿" };

let { name, slogan = "尘世闲游" } = character;

console.log(slogan);

补全嵌套解构代码，提取 panel 内部 height 属性

javascript

运行

const gui = { panel: { width: 320, height: 400 } };

let { panel: { width, ____ } } = gui;

进阶题

分析代码输出，说明默认值触发逻辑

javascript

运行

const prop = { name: "清心香", count: null };

let { name, count = 99 } = prop;

console.log(count);

编写 MC 脚本：嵌套道具对象{ui:{title:"胡桃杂货铺"},item:{name:"招魂幡"}}，嵌套解构提取 ui 标题，道具无耐久属性，给 durability 设置默认值 64 并打印。

参考答案

基础题答案

输出：尘世闲游

height

进阶题答案

输出 null；默认值仅在属性值为 undefined 时生效，count 值为 null，不会触发兜底数字 99。

标准 MC 脚本代码：

javascript

运行

const mcShop = {

ui: { title: "胡桃杂货铺" },

item: { name: "招魂幡" }

};

let {

ui: { title },

item: { name, durability = 64 }

} = mcShop;

console.log(title, durability);