解构赋值是从已有结构按模式提取值并赋给变量的语法糖。数组解构按索引顺序匹配,支持跳过、剩余参数和交换;对象解构按属性名匹配,支持重命名、默认值、嵌套及剩余属性,但需防范null/undefined和路径断裂风险。

const { name, age } = user 这类写法就是解构赋值——它不是创建新对象,而是从已有结构中「按模式提取值」并直接赋给变量。本质是语法糖,省去 user.name、arr[0] 这类手动取值步骤。
数组解构:按索引顺序匹配,跳过和剩余都靠逗号
数组解构严格依赖位置:左边变量顺序对应右边索引顺序。
- 跳过中间元素:用连续逗号,
const [first, , third] = ['a', 'b', 'c']→first === 'a',third === 'c' - 获取剩余项:用
...剩余参数,const [a, b, ...rest] = [1, 2, 3, 4]→rest是[3, 4](注意必须放在末尾) - 交换变量无需临时变量:
[a, b] = [b, a]直接生效 - 函数返回多值很自然:
const [err, data] = await apiCall(),前提是返回的是数组
对象解构:按属性名匹配,可重命名、设默认值、嵌套一层到底
对象解构不看顺序,只看属性名是否匹配;const { age, name } = user 和 const { name, age } = user 效果完全一样。
- 重命名用冒号:
const { name: userName, age: userAge } = user - 默认值只在属性为
undefined时生效:const { city = 'Beijing' } = user;但若user.city === null,则city仍为null,不会触发默认值 - 安全处理可能为
null或undefined的入参:函数参数要写成function f({ x = 1 } = {}) {},否则传入null会直接报错Cannot destructure property 'x' of 'null' - 嵌套解构要确保路径存在:
const { profile: { avatar } } = user要求user.profile存在;若不确定,可用空对象兜底:const { profile = {} } = user; const { avatar } = profile
常见错误:null/undefined 不可解构 + 类型隐式兼容陷阱
解构对输入类型很敏感,不是所有“看起来像”的值都能用。
-
let obj = null; const { x } = obj→ 报错:TypeError: Cannot destructure property 'x' of 'null' -
const { length } = 'abc'合法(字符串有length属性),但const { map } = 42报错(数字没有map方法) - 类数组对象如
NodeList或arguments可以数组解构,但前提是它们有Symbol.iterator;旧版 IE 不支持,需转成真数组再操作 - 行首解构要加括号,否则可能被解析为代码块:
({ a } = obj),否则会报SyntaxError
嵌套与剩余:对象也能用 ...,但语义完全不同
对象的 ... 是「剩余属性」,提取未显式列出的其他属性;和数组的「剩余元素」不是一回事。
-
const { name, ...rest } = { name: 'Alice', age: 30, city: 'Shanghai' }→rest是{ age: 30, city: 'Shanghai' } - 剩余属性必须在解构末尾,且不能用于嵌套层级内部:
{ a: { b, ...c } }❌ 不合法 - 剩余属性只拷贝自身可枚举属性,不继承原型链上的属性
- 深层嵌套建议分步解构或配合可选链(
?.)使用,避免因某层缺失导致整个解构失败
null 没兜住、嵌套路径断裂这些边界情况。写解构前先问一句:“这个值真能保证存在吗?”比记住所有语法形式更重要。










