第三十天：解构赋值 — 从对象和数组中优雅取值
蜗牛往上爬 · 前端工业可视化学习笔记 第 30 篇
解构赋值是 ES6 最常用的语法之一——从数组按位置、从对象按属性名一次性取出多个值。交换变量一行搞定、函数参数直接解构、从 API 数据里优雅提取字段。今天把数组解构和对象解构都吃透。
目录
一、数组解构：按位置取值
// 传统写法
var a = 1, b = 2, c = 3;
// 解构：等号左边是"模式"，按位置对应
let [x, y, z] = [1, 2, 3];
console.log(x); // 1
console.log(y); // 2
console.log(z); // 3
数组按位置，对象按属性名——这是两者的核心区别。
二、交换变量、跳过、默认值、rest
// ⭐ 交换变量（经典场景，一行搞定）
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1
// 跳过元素：逗号占位
let [, , third] = [1, 2, 3];
console.log(third); // 3
// 嵌套解构
let [x, [y, z]] = [1, [2, 3]];
console.log(x, y, z); // 1 2 3
// 默认值：右边为 undefined 时使用
let [m = "默认", n] = [undefined, 2];
console.log(m); // "默认"
// rest 剩余：收集剩余元素成数组
let [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 1
console.log(rest); // [2, 3, 4]
rest 的威力：替代 arguments 写"任意参数求和"：
// arguments 是伪数组（没有 map/filter）
function sum() {
return Array.prototype.reduce.call(arguments, function (a, b) { return a + b; }, 0);
}
// rest 是真数组，直接 reduce
function sumES6(...nums) {
return nums.reduce((a, b) => a + b, 0);
}
console.log(sumES6(1, 2, 3, 4)); // 10
三、对象解构：按属性名取值
// 传统写法
var device = { id: "CNC-001", name: "数控机床", temp: 65 };
var id = device.id;
var name = device.name;
// 解构：按属性名匹配（顺序无所谓）
let { id, name, temp } = { id: "CNC-001", name: "数控机床", temp: 65 };
console.log(id); // "CNC-001"
console.log(name); // "数控机床"
四、重命名与默认值
// 重命名：把 device_id 提取为 id
const data = { device_id: "CNC-001", temp: 65 };
const { device_id: id, temp } = data;
console.log(id); // "CNC-001"
// 默认值：属性不存在或 undefined 时用
const { online = true } = { temp: 65 };
console.log(online); // true
// 重命名 + 默认值
const { name: displayName = "未知设备" } = {};
console.log(displayName); // "未知设备"
五、嵌套解构
const device = {
id: "CNC-001",
location: { workshop: "一号车间", row: 3, column: 5 },
maintenance: { nextDate: "2026-10-01" }
};
// 提取嵌套属性
const { location: { workshop, row }, maintenance: { nextDate } } = device;
console.log(workshop); // "一号车间"
console.log(row); // 3
console.log(nextDate); // "2026-10-01"
六、函数参数解构
这是最常用的解构场景——参数直接解构对象：
// 传统写法
function showDevice(info) {
console.log(info.name + "：" + info.temp + "°C");
}
// 解构写法
function showDevice({ name, temp }) {
console.log(name + "：" + temp + "°C");
}
showDevice({ name: "CNC-001", temp: 65 }); // "CNC-001：65°C"
// 配合默认值（参数整体默认 = {}，字段再各自默认）
function renderDevice({ id, name = "未知设备", temp = 0 } = {}) {
console.log(id + " - " + name + " - " + temp + "°C");
}
renderDevice({ id: "CNC-001" }); // "CNC-001 - 未知设备 - 0°C"
renderDevice(); // "undefined - 未知设备 - 0°C"
工业大屏里，函数参数往往是一个"配置对象"（options），解构参数 + 默认值是最优雅的写法。
七、注意事项
// 1. 解构 null/undefined 报错
// let { a } = null; // ❌ TypeError
// 2. 已声明变量的解构要加括号（防止被当代码块）
let x;
({ x } = { x: 1 }); // ✅
console.log(x); // 1
// 3. 不存在的属性 → undefined
let { pressure } = { temp: 65 };
console.log(pressure); // undefined
// 4. 变量名不能重复
// let { a, a } = { a: 1 }; // ❌ SyntaxError
八、综合实战：从 API 提取字段
后端返回设备详情（字段很多），用解构一次提取大屏需要的字段：
const apiDevice = {
id: "CNC-001",
name: "数控机床",
model: "VMC850",
temperature: 65.3,
speed: 1200,
status: "运行中",
online: true,
location: { workshop: "一号车间", row: 3 },
maintenance: { nextDate: "2026-10-01" }
};
// 重命名 + 嵌套 + 默认值 一站式提取
const {
id,
name,
temperature: temp, // 重命名
speed,
online = false,
location: { workshop }, // 嵌套
maintenance: { nextDate } // 嵌套
} = apiDevice;
console.log(`
设备：${name}（${id}）
车间：${workshop}
温度：${temp}°C，转速：${speed}rpm
状态：${status}（${online ? "在线" : "离线"}）
下次保养：${nextDate}
`);
配合 for…of 遍历对象数组：
const deviceList = [
{ id: "CNC-001", temp: 65 },
{ id: "AGV-002", temp: 42 }
];
// 遍历时直接解构
for (const { id, temp } of deviceList) {
console.log(id + "：" + temp + "°C");
}
九、总结
🎯 解构赋值是 ES6 使用频率最高的语法之一。明天开始学函数扩展（箭头函数）和字符串/数组扩展——代码将全面"现代化"。