解构赋值是ES2015正式特性，支持数组（按位置）和对象（按属性名）提取值；数组解构可跳过、设默认值、用...捕获剩余项；对象解构支持别名、嵌套及默认值；需防null/undefined报错，慎用于深度嵌套或性能敏感场景。
const 和 let 声明后直接从数组或对象中提取值并赋给变量，就是解构赋值。它不是语法糖，而是 JavaScript 的正式语言特性（ES2015 起支持），能减少重复写属性名或索引的样板代码。
数组解构：按位置取值，支持跳过、默认值和剩余元素
数组解构靠的是「位置对应」，左边的变量顺序决定从右边数组哪个索引取值。
- 不匹配时，未对应的变量得
undefined；可显式设默认值：const [a, b = 10] = [1]→a是1，b是10 - 想跳过某项？留空逗号：
const [first, , third] = ['a', 'b', 'c']→first是'a'，third是'c' - 用
...捕获剩余项（必须是最后一个）：const [x, ...rest] = [1, 2, 3, 4]→rest是[2, 3, 4] - 解构不改变原数组，也不要求右侧一定是
Array实例——只要可迭代（如String、Set）就能用
const [head, ...tail] = 'hello'; console.log(head); // 'h' console.log(tail); // ['e', 'l', 'l', 'o']
对象解构：按属性名取值，别名和嵌套是高频痛点
对象解构靠的是「属性名匹配」，左侧的键名必须和右侧对象的自有属性名一致（不看原型链）。
- 要改变量名？用
prop: newVar语法：const { name: fullName } = { name: 'Alice' }→fullName是'Alice' - 嵌套对象需逐层展开：
const { user: { id, profile: { age } } } = { user: { id: 123, profile: { age: 30 } } } - 深层嵌套时，若某一层为
undefined，会直接报错Cannot destructure property 'xxx' of 'undefined'；加默认值可防崩：const { user = {} } = data; const { id } = user; - 函数参数也支持解构：
function greet({ name, msg = 'Hi' }) { return `${msg}, ${name}!`; }
解构常见翻车点：null/undefined、循环引用、函数参数默认值
解构本身不校验右侧值类型，但一旦遇到 null 或 undefined，就会抛 TypeError。
-
let [a] = null→ 报错，因为null不可迭代；同理let { x } = undefined也会崩 - 安全做法：先确保右侧有值，或用逻辑运算符兜底：
const [first] = arr || []，const { id } = obj || {} - 解构不会触发 getter，也不会对原始对象做深拷贝——所有变量都指向原对象的同一引用
- 函数参数解构 + 默认值容易混淆作用域：
function f({ x = 1 } = {}) { return x; }这里外层= {}是给整个参数对象设默认值，内层x = 1是给属性设默认值，两者缺一不可
什么时候不该用解构？性能和可读性边界在哪
解构适合提取少量关键字段；过度嵌套或一次解太多，反而让代码难定位来源。
- 从 API 响应中取 1–3 个字段？推荐用解构，清晰又省打字
- 要取 8 个字段，还带 3 层嵌套？不如保留对象引用，用点号访问更直观
- 在性能敏感循环里频繁解构大对象？V8 虽已优化，但比直接访问
obj.prop多一层属性查找开销 - 注意 Babel 编译行为：老版本可能把解构转成临时变量 +
var，影响块级作用域语义；确保目标环境或 polyfill 支持 ES2015+ 解构
const data = { a: 1, b: { c: 2, d: { e: 3 } } };
// ✅ 清晰
const { a, b: { c } } = data;
// ❌ 难维护
const { a, b: { c, d: { e } }, f = 0, g: { h } = {} } = data;
解构看着简单，真正用稳的关键在于：始终清楚右侧值是否可能为 null 或
undefined，以及是否真需要立刻拆开——有时候留着对象，比拆成十个变量更可控。
