17370845950

JavaScript解构赋值是通过数组或对象的结构提取值并赋给变量的简洁语法：数组按索引位置匹配，对象按属性名匹配，支持跳过、剩余收集、默认值、重命名和嵌套解构，但需避免解构null/undefined且左右结构须对齐。

JavaScript 解构赋值是一种简洁语法，用于从数组或对象中提取值并赋给变量，无需通过索引或属性名逐个访问。

从数组中解构：按位置取值

数组解构依据元素在数组中的顺序（索引）来匹配变量。左边用方括号 []，右边是数组。

• 基础用法：const [a, b] = [1, 2]; → a 得到 1，b 得到 2
• 跳过某些元素：const [first, , third] = ['a', 'b', 'c']; → first = 'a'，third = 'c'
• 剩余元素收集：const [x, ...rest] = [10, 20, 30, 40]; → x = 10，rest = [20, 30, 40]
• 默认值：const [p = 0, q = 0] = [5]; → p = 5，q = 0（因为第二个值不存在）

从对象中解构：按属性名取值

对象解构依据属性名匹配，左边用花括号 {}，右边是对象。变量名默认需与属性名一致。

• 基础用法：const { name, age } = { name: 'Alice', age: 30 }; → 直接得到变量 name 和 age
• 重命名变量：const { name: fullName, age: years } = { name: 'Bob', age: 25 }; → fullName = 'Bob'，years = 25
• 设置默认值：const { city = 'Unknown' } = { name: 'Tom' }; → city 为 'Unknown'（因原对象无 city 属性）
• 嵌套解构：const { user: { id, profile: { level } } } = { user: { id: 123, profile: { level: 'pro' } } }; → id = 123，level = 'pro'

实用技巧与注意事项

解构不仅用于声明变量，也可用于函数参数、返回值、甚至交换变量值，但需注意几个常见坑：

• 解构 null 或 undefined 会报错：const { x } = null; → TypeError；可先做存在性检查或用空对象兜底：const { x } = obj || {};
• 函数参数解构很常用：function greet({ name = 'Guest', lang = 'en' }) { return `Hello ${name}`; }
• 不能单独解构（无声明）：{ a, b } = { a: 1, b: 2 }; 会报语法错误；必须加括号 ({ a, b } = { a: 1, b: 2 }); 或配合 let/const
• 解构不改变原数组或对象，只是读取值，属于“浅解构”——嵌套对象仍为引用

不复杂但容易忽略

解构本质是语法糖，背后仍是属性访问和数组索引。写得清楚时能让代码更直观，尤其处理 API 响应、配置对象或函数入参时。关键是记住左右结构要“形状对齐”，名字（或位置）对得上，再配上默认值和重命名，就能覆盖大多数场景。