解构赋值是ES6引入的语法糖，通过模式匹配从数组或对象中提取值并赋给变量；支持重命名、默认值、嵌套及函数参数解构，但需防范null/undefined导致的TypeError。
解构赋值是什么：一种从数组或对象中提取值并赋给变量的语法糖
它不是新功能，而是 JavaScript（ES6 起）提供的更简洁的取值方式。本质是「模式匹配 + 赋值」：你写一个结构（比如 { name, age }），JS 会按这个结构从源对象里找对应属性，自动把值塞进同名变量。
不用解构时，你得这么写：
const user = { name: 'Alice', age: 30 };
const name = user.name;
const age = user.age;
用了之后，一行搞定：
const { name, age } = user;
对象解构：支持重命名、默认值、嵌套，但别漏掉源对象存在性检查
常见错误是直接对 null 或 undefined 解构，会抛出 TypeError: Cannot destructure property 'xxx' of 'xxx' as it is undefined。
立即学习“Java免费学习笔记（深入）”；
-
{ name: userName }—— 重命名：把user.name赋给变量userName -
{ age = 25 }—— 默认值：如果user.age是undefined，就用25 -
{ profile: { city } }—— 嵌套解构：等价于const city = user.profile?.city，但不带可选链，所以profile必须存在 - 安全写法：
const { name = 'Anonymous' } = user || {};或用空对象兜底
数组解构：按索引顺序取值，支持跳过、剩余元素和交换变量
它依赖位置而非键名，所以顺序敏感。常用于函数返回多值、参数接收、快速交换。
-
[a, , c]—— 跳过第二个元素（用逗号占位） -
[first, ...rest]——rest得到剩余所有项（必须在末尾） -
[x, y] = [y, x]—— 无需临时变量就能交换两个变量 - 注意：对类数组或迭代器也有效，比如
const [head, ...tail] = [...document.querySelectorAll('li')];
函数参数解构：让调用方传对象更清晰，但别滥用深层嵌套
把解构直接写在函数形参里，调用时传对象即可，避免在函数体内反复写 obj.x。
function greet({ name = 'Guest', level = 'user' }) {
console.log(`Hello ${name}, role: ${level}`);
}
greet({ name: 'Bob', level: 'admin' }); // Hello Bob, role: admin
问题在于——如果调用方传了结构不符的对象（比如漏了 name），默认值只在 undefined 时生效，null 会直接触发解构失败。更健壮的做法是加一层防御：
function greet(options = {}) {
const { name = 'Guest', level = 'user' } = options;
// ...
}
深层嵌套解构（如 { user: { profile: { avatar } } }）会让函数签名难读且脆弱，建议只解到第一层，内部再手动处理。
真正省代码的地方不在“写得少”，而在“意图明确”：看到 const { id, status } = order; 就知道后续只关心这两个字段，而不是翻遍整个 order 对象找引用点。
