17370845950

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'

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

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

• 接收对象参数：function greet({ name, msg = '你好' }) { return `${msg}, ${name}!`; }
  调用 greet({ name: '李四' }) → "你好, 李四!"
• 接收数组参数（较少但可行）：function sum([a, b]) { return a + b; }
  调用 sum([3, 5]) → 8
• 结合默认参数与解构：function config({ timeout = 5000, retries = 3 } = {}) { ... }，注意等号右边的空对象防止传入 undefined 报错

注意事项和易错点

解构看似简单，但几个细节容易引发错误。

• 解构赋值语句不能以花括号或方括号开头（会被解析为代码块），如需单独一行解构对象，加括号：({ a } = obj);
• 对 null 或 undefined 解构会报错，建议先校验或用默认值兜底
• 数组解构不关心长度，超出部分得 undefined；对象解构只认属性名，不存在的属性也得 undefined（除非设了默认值）
• 解构的是“值”，不是引用——对基本类型是拷贝，对对象/数组仍是浅拷贝，内部嵌套对象仍共享引用