17370845950

JavaScript解构赋值是从数组或对象中按名或按位提取值并赋给变量的简洁语法，支持重命名、默认值、嵌套及混合解构，提升代码可读性与开发效率。

JavaScript 的解构赋值是一种从数组或对象中提取值并赋给变量的简洁语法，不用再写一堆 obj.prop 或 arr[0] 就能快速拿到想要的数据。

对象解构：按名字取值

直接用大括号匹配属性名，自动把对应值赋给同名变量：

例如：

• const { name, age } = { name: '小明', age: 25 }; → 得到 name === '小明'、age === 25
• 可以重命名：const { name: nickname } = { name: '小明' }; → nickname 得到 '小明'
• 支持默认值：const { city = '北京' } = {}; → city 是 '北京'

数组解构：按位置取值

用中括号按索引顺序接收元素，跳过不想用的项也很方便：

• const [a, b] = [1, 2, 3]; → a === 1，b === 2
• 跳过中间项：const [first, , third] = ['a', 'b', 'c']; → first === 'a'，third === 'c'
• 剩余元素用扩展运算符：const [x, ...rest] = [10, 20, 30, 40]; → rest 是 [20, 30, 40]

函数参数解构：让调用更清晰

把解构直接写在形参位置，传入对象时自动拆开，省得函数里再手动取值：

• function greet({ name, greeting = '你好' }) { return `${greeting}, ${name}!`; }
• 调用：greet({ name: '李四' }) → '你好, 李四!'
• 配合默认值和重命名，接口语义更强，也不怕传参缺字段

嵌套与混合解构：处理复杂结构很顺手

深层对象或数组嵌套也能一层写完，避免链式访问出错：

• const { user: { profile: { avatar } } } = { user: { profile: { avatar: 'avatar.png' } } };
• 数组+对象混合：const [{ id, title }, ...rest] = [{ id: 1, title: '标题' }, { id: 2 }];
• 注意：解构时若某层是 undefined，会报错；可配合默认空对象防御：const { user = {} } = data;

基本上就这些。它不改变运行逻辑，但让代码更短、意图更明确，尤其在处理 API 返回数据、配置对象、路由参数时特别省心。