JavaScript解构赋值是通过数组或对象的结构提取值并赋给变量的简洁语法：数组按索引位置匹配，对象按属性名匹配，支持跳过、剩余收集、默认值、重命名和嵌套解构，但需避免解构null/undefined且左右结构须对齐。
JavaScript 解构赋值是一种简洁语法，用于从数组或对象中提取值并赋给变量，无需通过索引或属性名逐个访问。
从数组中解构：按位置
取值
取值数组解构依据元素在数组中的顺序（索引）来匹配变量。左边用方括号 []，右边是数组。
- 基础用法：
const [a, b] = [1, 2];→a得到1，b得到2 - 跳过某些元素：
const [first, , third] = ['a', 'b', 'c'];→first = 'a'，third = 'c' - 剩余元素收集：
const [x, ...rest] = [10, 20, 30, 40];→x = 10，rest = [20, 30, 40] - 默认值：
const [p = 0, q = 0] = [5];→p = 5，q = 0（因为第二个值不存在）
从对象中解构：按属性名取值
对象解构依据属性名匹配，左边用花括号 {}，右边是对象。变量名默认需与属性名一致。
- 基础用法：
const { name, age } = { name: 'Alice', age: 30 };→ 直接得到变量name和age - 重命名变量：
const { name: fullName, age: years } = { name: 'Bob', age: 25 };→fullName = 'Bob'，years = 25 - 设置默认值：
const { city = 'Unknown' } = { name: 'Tom' };→city为'Unknown'（因原对象无city属性） - 嵌套解构：
const { user: { id, profile: { level } } } = { user: { id: 123, profile: { level: 'pro' } } };→id = 123，level = 'pro'
实用技巧与注意事项
解构不仅用于声明变量，也可用于函数参数、返回值、甚至交换变量值，但需注意几个常见坑：
- 解构 null 或 undefined 会报错：
const { x } = null;→ TypeError；可先做存在性检查或用空对象兜底：const { x } = obj || {}; - 函数参数解构很常用：
function greet({ name = 'Guest', lang = 'en' }) { return `Hello ${name}`; } - 不能单独解构（无声明）：
{ a, b } = { a: 1, b: 2 };会报语法错误；必须加括号({ a, b } = { a: 1, b: 2 });或配合let/const - 解构不改变原数组或对象，只是读取值，属于“浅解构”——嵌套对象仍为引用
不复杂但容易忽略
解构本质是语法糖，背后仍是属性访问和数组索引。写得清楚时能让代码更直观，尤其处理 API 响应、配置对象或函数入参时。关键是记住左右结构要“形状对齐”，名字（或位置）对得上，再配上默认值和重命名，就能覆盖大多数场景。
