解构赋值是JavaScript中从数组或对象提取值并赋给变量的语法，提升代码简洁性与可读性；支持数组按位置、对象按属性名解构，含跳过、剩余、默认值、重命名、嵌套及函数参数解构等功能。

JavaScript 中的解构赋值是一种从数组或对象中快速提取值并赋给变量的语法，它让变量提取更直观、代码更简洁，避免了冗长的点号访问或索引写法。

数组解构：按位置提取值

数组解构使用方括号 []，依据元素在数组中的顺序一一对应赋值。

• 基础用法：const [a, b] = [1, 2]; → a 得到 1，b 得到 2
• 跳过某些项：用逗号占位，const [x, , z] = [10, 20, 30]; → x=10，z=30
• 剩余元素：用扩展运算符 ... 收集剩余项，const [first, ...rest] = [1, 2, 3, 4]; → first=1，rest=[2,3,4]
• 默认值：当对应位置无值时提供后备，const [name = '匿名'] = []; → name 为 '匿名'

对象解构：按属性名提取值

对象解构使用花括号 {}，依据属性名匹配赋值，不依赖顺序。

• 基础用法：const { name, age } = { name: '张三', age: 25 }; → 直接得到变量 name 和 age
• 重命名变量：用 原属性名: 新变量名，const { title: bookName } = { title: 'JS入门' }; → 变量名为 bookName
• 嵌套解构：可逐层展开，const { user: { id, profile: { city } } } = { user: { id: 123, profile: { city: '杭州' } } }; → 一步拿到 id 和 city
• 函数参数中直接解构：简化函数内部取值逻辑，function greet({ name, level = '用户' }) { return `你好，${level} ${name}`; }

为什么解构能简化变量提取

传统方式需多次点号或下标访问，尤其面对嵌套结构时易出错、难读；解构把“提取逻辑”前置声明，一次写清所需字段，提升可读性与维护性。

• 减少重复访问：不用反复写 obj.user.profile.address.city，解构后直接用 city
• 明确意图：看到 const { id, email } = user; 就知道函数只关心这两个字段
• 天然支持默认值和重命名，适应接口字段不一致的场景（比如 API 返回 user_name，但你想叫 name）
• 配合函数参数、返回值使用，让纯函数更干净，例如 Promise 解构：const { data } = await api.getUser();

注意事项与常见陷阱

解构不是万能的，需注意运行时安全和语义清晰。

• 解构 null 或 undefined 会报错，可用空值合并或逻辑判断兜底：const { name } = user || {};
• 对象解构时属性不存在则变量为 undefined，不是报错，但可能引发隐式类型问题
• 不要为了炫技过度嵌套解构，三层以上建议拆成多个步骤，保障可调试性
• 解构赋值本身不创建新对象/数组，只是引用赋值；若需深拷贝，仍要配合其他方法