解构赋值是JavaScript中按模式从数组或对象提取值的底层能力，支持对象/数组解构、嵌套提取、别名、默认值、函数参数解构及数组跳过/剩余等技巧，但不处理null/undefined。
解构赋值不是语法糖，是 JavaScript 里真正改变数据提取方式的底层能力——它直接从数组或对象中“按模式取值”，省去手动索引或属性访问的冗余步骤。
什么是解构赋值：对象和数组两种基本形式
解构赋值本质是“模式匹配 + 赋值同步”。左边写结构（像模板），右边提供数据源，引擎自动把对应位置的值填进去。
对象解构看键名：{ name, age } 会从右侧对象里找 name 和 age 属性；数组解构看位置：[a, b] 按索引 0、1 取值。
常见错误现象：const { name } = null 会直接报 TypeError: Cannot destructure property 'name' of 'null' as it is null. —— 解构不处理 null/undefined，必须提前校验或用默认值兜底。
立即学习“Java免费学习笔记（深入）”；
快速提取嵌套数据：多层解构 + 别名 + 默认值
深层嵌套不用写 data.user.profile.name 这种长链，一层解构就能拿到最内层字段。
- 嵌套对象：
const { user: { profile: { name, avatar } } } = data - 重命名避免冲突：
const { id: userId, name: userName } = user - 防 undefined：
const { tags = [], score = 0 } = post
注意：默认值只在属性为 undefined 时生效，null、0、false 都不会触发默认值。
函数参数解构：让调用更语义化，也更脆弱
把解构搬到函数形参里，调用方可以传对象，函数内部直接拿到所需字段。
示例：function greet({ name = 'Guest', lang = 'en' }) { return `Hello, ${name}!`; }
使用场景：配置项多的函数（如 fetch 的 options）、React 的 props、CLI 工具的参数解析。
容易踩的坑：
– 如果调用时传了 undefined，整个解构失败，函数体还没执行就报错；
– 必须加默认值或用 || {} 包裹：function fn(opts = {}) { const { timeout } = opts; }
数组解构的实用技巧：跳过、剩余、交换、解构迭代器
数组解构不止是取前几个元素，它支持灵活的“位置控制”。
- 跳过中间项：
const [first, , third] = ['a', 'b', 'c']→first === 'a',third === 'c' - 获取剩余元素：
const [head, ...tail] = [1, 2, 3, 4]→tail是[2, 3, 4] - 交换变量无需临时变量：
[a, b] = [b, a] - 解构 Set 或 Map 的迭代器：
const [firstKey] = new Map([['a', 1]]).keys()
性能提示：解构本身几乎没有开销，但 ... 扩展运算符会创建新数组，大数据量时留意内存分配。
真正难的不是语法，而是判断什么时候该用解构、什么时候该保持直白访问——比如调试时打印 obj.user?.profile?.name 比嵌套解构更易定位问题；再比如从 API 接口取几十个字段时，解构配合 TypeScript 类型推导才真正发挥价值。
