JavaScript解构赋值是从数组或对象中按结构提取值并赋给变量的语法，支持对象解构（含重命名、默认值、嵌套）、数组解构（含跳过、剩余项、交换）、函数参数解构及高级技巧（剩余属性、混合嵌套、字符串解构）。
JavaScript解构赋值是一种从数组或对象中按结构“取出”值并直接赋给变量的语法，不用再写 obj.name 或 arr[0] 这类重复取值代码，让逻辑更干净、意图更明确。
对象解构：按属性名精准提取
适合处理配置项、API响应、表单数据等以键值对组织的信息。
- 基础用法：
const { name, age } = user;—— 直接获取同名属性
- 重命名变量：
const { name: userName, age: userAge } = user;—— 避免命名冲突或提升语义清晰度 - 设置默认值：
const { role = 'guest', avatar = '/default.png' } = user;—— 属性不存在时自动 fallback，防止undefined导致报错 - 嵌套提取：
const { profile: { city, tags = [] } } = data;—— 一层写完深层路径，比连写data.profile?.city更简洁（注意：若中间某层为undefined会报错，建议配合可选链或默认值）
数组解构：按位置高效取值
常用于处理列表、函数返回多个值、拆分字符串结果等场景。
- 顺序取值：
const [first, second] = ['a', 'b', 'c'];——first得'a'，second得'b' - 跳过元素：
const [, , third] = ['x', 'y', 'z'];—— 忽略前两项，直接拿到第三个 - 捕获剩余项：
const [head, ...tail] = [1, 2, 3, 4];——tail是数组[2, 3, 4]，不是单个值 - 交换变量：
[a, b] = [b, a];—— 无需临时变量，一行完成交换 - 带默认值的缺失位：
const [a, b, c = 'default'] = ['x'];——c取默认值，因为原数组没有第三项
函数参数中直接解构
把“接收对象/数组 → 解构取值”的两步合并为一步，大幅提升函数签名可读性。
- 对象参数：
function login({ username, password, remember = false }) { ... }—— 调用时传{ username: 'a', password: 'b' }即可，remember自动为false - 数组参数：
function draw([x, y, radius = 10]) { ... }—— 适合坐标、尺寸等有序数据 - 混合+默认：
function fetchUser({ id, timeout = 5000 } = {}) { ... }—— 连空对象调用fetchUser()也不报错
高级技巧：剩余属性与混合嵌套
应对真实项目中复杂、不规则的数据结构。
- 分离关键字段和其余属性：
const { id, title, ...rest } = post;——id和title单独处理，rest包含所有其他字段（如createdAt、author等） - 数组+对象混合嵌套：
const [{ name }, , { count }] = usersData;—— 从数组第一项取name，跳过第二项，从第三项对象里取count - 解构函数返回值：
const [err, data] = await apiCall();—— 常见于错误优先回调或自定义 Promise 封装 - 字符串也能解构：
const [a, b, c] = 'hi!';—— 得到'h'、'i'、'!'，本质是字符串被转为类数组迭代器
