解构赋值是JavaScript中按位置（数组）或属性名（对象）提取值的语法，支持跳过、剩余、默认值、重命名和嵌套，常用于函数参数、变量交换和API数据提取，需注意左侧语法合法性及undefined处理。
解构赋值是 JavaScript 中一种简洁提取数组或对象中值的语法，它让你不用写一堆点号或下标就能拿到想要的数据。
数组解构：按位置取值
数组解构用方括号 []，变量顺序对应元素索引位置。没匹配上的变量为 undefined，也可以跳过某些位置或设置默认值。
-
基本用法：
const [a, b, c] = [1, 2, 3];→ a=1, b=2, c=3 -
跳过元素：
const [first, , third] = ['a', 'b', 'c'];→ first='a', third='c' -
剩余元素：
const [x, ...rest] = [10, 20, 30, 40];→ x=10, rest=[20,30,40] -
默认值：
const [name = '匿名'] = [];→ name='匿名'
对象解构：按属性名取值
对象解构用花括号 {}，变量名默认需与属性名一致。可重命名、设默认值、嵌套解构，甚至从函数返回的对象里直接解构。
-
基础形式：
const { name, age } = { name: '小明', age: 25 }; -
重命名变量：
const { name: nickname, age: years } = obj; -
默认值：
const { city = '北京' } = { name: '李四' };→ city='北京' -
嵌套解构：
const { user: { profile: { level } } } = data;
实用场景举例
解构不是炫技，而是让代码更清晰、更少出错。
-
函数参数解构：
function greet({ name, msg = '你好' }) { return `${msg}, ${name}!`; } -
交换变量（不用临时变量）：
[a, b] = [b, a]; -
从 API 响应中快速取数据：
const { data: { id, title }, status } = await fetchPost();
注意点
解构看起来简单，但几个细节容易踩坑。
- 解构赋值左边不能是纯数字、字符串或已声明的常量（如
const { x } = obj;合法，但{ x } = obj;会报错，需加括号或用let/var） - 对象解构时，如果属性不存在且没设默认值，变量值为 undefined，不会报错
- 数组解构不关心长度，对象解构不关心是否“完整”，只管你写了哪些变量
