JavaScript解构赋值详解与使用技巧

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《JavaScript解构赋值怎么用？》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

解构赋值是JavaScript中从数组或对象提取值并赋给变量的简洁语法，支持对象/数组解构、重命名、默认值、嵌套结构及函数参数解构。

解构赋值是 JavaScript 中一种从数组或对象中提取值并赋给变量的简洁语法，它让代码更清晰、更少冗余。

对象解构：按属性名提取值

可以直接从对象中取出指定属性，无需重复写对象名和点号。

• 基础用法：const { name, age } = person; 等价于 const name = person.name; const age = person.age;
• 重命名变量：const { name: fullName, age: userAge } = person; 把 name 赋给 fullName
• 设置默认值：const { city = 'Beijing' } = person; 如果 person.city 不存在或为 undefined，就用默认值

数组解构：按位置提取元素

通过方括号和逗号分隔的位置关系，快速获取数组中的项。

• 基本形式：const [first, second] = arr; 取出前两个元素
• 跳过某些元素：const [,, third] = arr; 忽略前两项，只取第三项
• 剩余元素收集：const [head, ...rest] = arr; rest 是一个包含后续所有元素的新数组

嵌套结构也能解构

对象或数组内部还有对象或数组时，可以一层层展开写。

• 嵌套对象：const { address: { street, zip } } = user;
• 嵌套数组：const [[a, b], [c]] = matrix; 从二维数组中分别取出值
• 混合使用：const { items: [firstItem], meta: { total } } = response;

函数参数中的解构很实用

把解构直接写在函数形参里，调用时传入对象或数组即可自动拆解。

• 对象参数：function logUser({ name, age = 18 }) { console.log(name, age); }
• 数组参数：function swap([a, b]) { return [b, a]; }
• 配合默认参数：function getConfig({ timeout = 5000, retries = 3 } = {}) { ... } 还能防止传入 undefined 报错

终于介绍完啦！小伙伴们，这篇关于《JavaScript解构赋值详解与使用技巧》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！