JavaScript解构赋值支持从数组或对象中按位置或属性名提取值并一次性为多个变量赋值，语法简洁可读性强，适用于函数参数、交换变量、API响应处理等场景，但需注意目标必须为可迭代对象或类对象。
JavaScript 中的解构赋值允许你从数组或对象中提取值，并**一次性为多个变量赋值**，写法简洁、可读性强。
数组解构：按位置提取
用方括号 [] 匹配数组元素顺序，直接给变量赋值：
const [a, b, c] = [1, 2, 3]; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3
- 变量数量少于数组长度时，只取前几个；多于时，多余变量为
undefined - 可用逗号跳过不需要的项：
const [first, , third] = ['a', 'b', 'c'];→first='a',third='c' - 支持默认值：
const [x = 10, y = 20] = [5];→x=5,y=20
对象解构：按属性名提取
用花括号 {} 按属性名匹配，变量名需与属性名一致（或使用别名）：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
const obj = { name: 'Alice', age: 30, city: 'Beijing' };
const { name, age } = obj;
console.log(name); // 'Alice'
console.log(age); // 30
- 变量名必须和属性名相同；若想用不同变量名，用别名：
const { name: userName, age: userAge } = obj; - 同样支持默认值：
const { job = 'unknown' } = obj; - 可嵌套解构：
const { address: { zip } } = { address: { zip: '100000' } };
混合与实用场景
解构常用于函数参数、返回值、交换变量、处理 API 响应等：
立即学习“Java免费学习笔记（深入）”；
- 函数参数解构（尤其对配置对象很友好）：
function greet({ name, msg = 'Hello' }) { return `${msg}, ${name}!`; } - 快速交换两个变量：
[a, b] = [b, a];（无需临时变量） - 从函数返回数组中取值：
const [min, max] = Math.minMax?.([4, 2, 8]) || [0, 0];（注意兼容性） - 配合 rest 运算符提取剩余项：
const [first, ...rest] = [1, 2, 3, 4];→first=1,rest=[2,3,4]
注意事项
解构不是万能的，需注意几点：
- 解构目标必须是可迭代对象（数组）或类对象（有属性的对象），
null或undefined会报错 - 对象解构时，若源对象不含对应属性，变量值为
undefined（除非设了默认值） - 在声明语句外使用解构需加括号，否则会被解析为代码块：
({ a, b } = { a: 1, b: 2 });
