解构赋值是JavaScript中从数组或对象提取值并赋给变量的简洁语法，支持对象属性提取（含重命名、默认值）、数组按位置取值（含跳过、剩余元素收集）、函数参数解构及嵌套解构，默认值可防报错。
解构赋值是 JavaScript 中一种从数组或对象中提取值并赋给变量的简洁语法，它让代码更直观、更少冗余，尤其在处理函数返回值、配置对象或嵌套数据时效果明显。
从对象中提取属性更直接
传统方式需要逐个访问属性再赋值，而解构允许一行完成：
- const user = { name: '张三', age: 28, city: '北京' };
- const { name, age } = user; → 直接得到 name 和 age 变量
- 还能重命名：const { city: location } = user; → 变量名为 location
- 设置默认值：const { job = '未知' } = user; → 若 job 不存在，用默认值
从数组中按位置取值更清晰
不再依赖索引下标，语义更明确：
- const colors = ['red', 'green', 'blue'];
- const [first, second] = colors; → first 是 'red'，second 是 'green'
- 跳过中间项：const [ , , third ] = colors; → 直接拿到 'blue'
- 剩余元素收集：const [head, ...rest] = [1, 2, 3, 4]; → rest 是 [2, 3, 4]
函数参数解构提升可读性与灵活性
把配置对象或数组参数直接解构进形参，避免函数体内重复取值：
立即学习“Java免费学习笔记（深入）”；
- function greet({ name, greeting = '你好' }) { return `${greeting}, ${name}!`; }
- 调用时传对象即可：greet({ name: '李四' }); → '你好, 李四!'
- 也支持默认参数结构：function draw([x = 0, y = 0], { size = 10, color = 'black' } = {}) { ... }
嵌套解构处理深层数据更安全
面对多层嵌套对象或数组，解构可一层写完，配合默认值还能防报错：
- const data = { user: { profile: { nickname: '小王', tags: ['前端', 'JS'] } } };
- const { user: { profile: { nickname, tags } } } = data;
- 加默认值防 undefined：const { user: { profile: { avatar = '/default.png' } = {} } = {} } = data;
不复杂但容易忽略，熟练使用解构赋值能让代码更短、意图更清、维护更轻松。
