解构赋值是JavaScript中改变取值逻辑的机制，支持数组和对象的声明式模式匹配，提升代码可读性与简洁性，但需注意空值报错、保留字限制及兼容性问题。
解构赋值不是语法糖，是 JavaScript 中真正改变取值逻辑的机制——它让“从复合数据中提取值”这件事从手动索引/属性访问，变成声明式模式匹配。
数组解构：用位置模式替代 arr[0]、arr[1]
传统写法要重复写 arr 和方括号，容易出错且冗长；解构直接按顺序绑定变量名。
- 基础用法：
const [a, b, c] = [1, 2, 3];→a === 1，b === 2，c === 3 - 跳过某项：用逗号占位，
const [first, , third] = ['a', 'b', 'c'];→first === 'a'，third === 'c' - 剩余元素：用
...收集，const [x, ...rest] = [10, 20, 30, 40];→rest是[20, 30, 40] - 默认值只在对应项为
undefined时生效，const [d = 5] = [null];→d是null，不是5
对象解构：用属性名替代 obj.key 访问
不用再写一堆 const name = user.name; 这类重复结构，属性名即变量名（可重命名）。
- 基础用法：
const { name, age } = { name: 'Alice', age: 30 };→ 直接得到变量name和age - 重命名：用
oldName: newName语法，const { title: headline } = { title: 'JS Guide' }; - 嵌套解构需显式写出路径：
const { profile: { city } } = { profile: { city: 'Beijing' } }; - 默认值对
undefined和缺失属性都有效，但对null、0、false不触发
函数参数里的解构：把“接收配置对象”变得干净又自文档化
这是最常被低估的用法——它让调用方无需记忆参数顺序，也让函数签名自带结构说明。
立即学习“Java免费学习笔记（深入）”；
- 对象参数解构：
function connect({ host = 'localhost', port = 3000, timeout = 5000 }) { ... } - 调用时可任意顺序传参：
connect({ port: 8080, host: 'api.example.com' }); - 数组参数解构较少见，但可用于固定位置参数，如
function draw([x, y, radius]) { ... } - 注意：若传入
undefined或null，会报Cannot destructure property ... of 'undefined' or 'null'
常见陷阱和兼容性提醒
解构看着简单，但几个细节不注意就会在运行时崩掉或行为反直觉。
-
let [a] = null;报错，因为null不可迭代；想安全解构得先判空或用??提供默认空数组 - 对象解构时，变量名不能是保留字（如
{ class }），必须重命名：{ class: className } - 在
for...of循环中可直接解构：for (const [key, value] of Object.entries(obj)) { ... } - 旧版 IE 完全不支持，Node.js 6+、Chrome 49+ 开始支持；Babel 可转译，但要注意
const/let块级作用域语义仍需 polyfill
真正难的不是写对语法，而是判断什么时候该用解构、什么时候该保持显式访问——比如调试时，user.profile.address.city 比层层嵌套解构更易定位问题；而函数参数和返回值处理，几乎总是解构优先。
