JavaScript解构赋值是提取数组或对象值并赋给变量的语法糖，支持数组按位置、对象按属性名解构，含默认值、别名、嵌套及剩余元素等特性，也适用于函数参数，但需避免解构null/undefined。
JavaScript 解构赋值是一种语法糖，允许你从数组或对象中“提取”值并直接赋给变量，省去逐个索引或属性访问的冗余写法。它让数据提取更简洁、可读性更强，尤其在处理函数返回值、配置对象、API 响应等场景时非常实用。
数组解构：按位置提取元素
数组解构使用方括号 []，变量顺序对应数组索引位置。未匹配的变量得 undefined，也可跳过、设置默认值或收集剩余项。
- 基础用法：
const [a, b] = [1, 2];→a为1，b为2 - 跳过某项：
const [first, , third] = ['a', 'b', 'c'];→first='a'，third='c' - 设置默认值：
const [x = 10, y = 20] = [5];→x=5，y=20 - 剩余元素：
const [head, ...tail] = [1, 2, 3, 4];→head=1，tail=[2,3,4]
对象解构：按属性名提取值
对象解构使用花括号 {}，变量名需与属性名一致（或使用别名）。同样支持默认值、嵌套解构和剩余属性。
- 基础用法：
const { name, age } = { name: 'Alice', age: 30 };→ 直接得到变量name和age - 别名赋值：
const { title: bookName } = { title: 'JS Guide' };→ 变量名为bookName - 默认值：
const { city = 'Beijing' } = { name: 'Tom' };→city为'Beijing' - 嵌套解构：
const { user: { id, profile: { email } } } = { user: { id: 123, profile: { email: 'a@b.com' } } };
函数参数中的解构：提升调用清晰度
函数形参可直接写解构模式，调用时传入对应结构的数据，避免函数内部手动提取。
立即学习“Java免费学习笔记（深入）”；
- 数组参数：
function print([first, second]) { console.log(first, second); }
调用：print(['hello', 'world']); - 对象参数（常见于配置）：
function connect({ host = 'localhost', port = 3000, secure = false }) { ... }
调用：connect({ host: 'api.example.com', port: 443, secure: true });—— 顺序无关，可读性强，未传字段自动取默认值
注意事项与常见陷阱
解构虽方便，但要注意几个细节，避免运行时错误：
- 解构 null 或 undefined 会报错：
const { a } = null;→ TypeError。可用空值合并或逻辑判断兜底，如const { a } = obj || {}; - 对象解构时变量名不能是保留字（如
class、function），需用别名：const { class: className } = elem; - 解构不创建新引用，对对象/数组内部的修改仍会影响原数据（浅拷贝特性）
