什么是javascript解构赋值_如何从数组和对象中提取数据

JavaScript解构赋值是通过数组或对象模式提取值并赋给变量的简洁语法：数组按索引、对象按属性名匹配；支持跳过、剩余、默认值、重命名、嵌套及函数参数解构，需注意括号包裹、null/undefined校验和浅拷贝特性。

JavaScript 解构赋值是一种简洁语法，允许你从数组或对象中按模式提取值并赋给变量，无需手动逐个访问属性或索引。

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

数组解构依据元素在数组中的顺序（索引）来匹配变量。左侧用方括号定义变量名，右侧是数组表达式。

• 基础用法：const [a, b] = [1, 2]; → a 得到 1，b 得到 2
• 跳过某些元素：用逗号占位，const [x, , z] = [10, 20, 30]; → x 是 10，z 是 30（忽略 20）
• 剩余元素：用扩展运算符 ... 收集剩余项，const [first, ...rest] = [1, 2, 3, 4]; → first 是 1，rest 是 [2, 3, 4]
• 默认值：当对应位置无值或为 undefined 时可设默认值，const [name = '匿名'] = []; → name 为 '匿名'

对象解构：按属性名提取数据

对象解构依据属性名匹配，左侧用花括号列出要提取的属性名，右侧是对象。

• 基础用法：const { name, age } = { name: '张三', age: 25 }; → 直接得到变量 name 和 age
• 重命名变量：用 原属性名: 新变量名 语法，const { title: bookName } = { title: 'JS入门' }; → bookName 得到 'JS入门'
• 嵌套解构：可一层层深入，const { user: { profile: { city } } } = { user: { profile: { city: '杭州' } } }; → city 是 '杭州'
• 默认值同样适用：const { role = 'user' } = {}; → role 为 'user'

解构在函数参数中的常见应用

函数形参直接使用解构，让调用更清晰，也避免在函数体内手动取值。

标签： javascript java js