解构赋值是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]

函数参数解构提升可读性与灵活性

把配置对象或数组参数直接解构进形参，避免函数体内重复取值：

Expanso yaml-to-json

使用 Expanso Edge 管道将 YAML 输入转换为 JSON 格式。

下载

立即学习“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;

不复杂但容易忽略，熟练使用解构赋值能让代码更短、意图更清、维护更轻松。