解构赋值是JavaScript中按模式直接提取数组或对象值的底层能力:数组按位置、对象按属性名;支持跳过、剩余、重命名、嵌套及默认值,但对null/undefined会报错,且不创建新引用。

解构赋值不是语法糖,是 JavaScript 中真正改变数据提取方式的底层能力——它直接从数组或对象中“按模式提取值”,而非先取整个结构再手动索引。
数组解构:按位置取值,顺序敏感
本质是把等号右边的可迭代对象(如数组)按索引位置,映射到左边的变量列表。不关心变量名,只认位置。
- 基础用法:
const [a, b, c] = [1, 2, 3]→a得1,b得2,c得3 - 跳过某位:用逗号占位,
const [first, , third] = ['a', 'b', 'c']→first是'a',third是'c' - 剩余元素:用
...收集,const [x, ...rest] = [10, 20, 30, 40]→rest是[20, 30, 40] - 默认值仅在对应项为
undefined时生效,null、0、false都不会触发:const [d = 99] = [0]→d是0,不是99
对象解构:按属性名取值,名称必须匹配
左边写的是“模式”,不是声明;变量名默认需与属性名一致。想换名?得用冒号重绑定。
- 基础用法:
const { name, age } = { name: 'Alice', age: 30 }→ 直接得到两个变量 - 重命名:用
原属性名: 新变量名,const { title: bookName } = { title: 'JS Guide' }→bookName是'JS Guide' - 嵌套解构:路径要写全,
const { user: { profile: { city } } } = { user: { profile: { city: 'Beijing' } } }→city是'Beijing' - 默认值逻辑同数组,但只对缺失属性或显式
undefined生效;若属性存在且值为null,默认值不触发
函数参数中的解构:让接口更清晰,也更易出错
函数形参支持直接解构,常用于配置对象传参,但容易忽略“传入非对象”导致的运行时错误。
立即学习“Java免费学习笔记(深入)”;
- 安全写法:给整个参数设默认值
{},避免undefined解构报错:function log({ level = 'info', msg } = {}) { ... } - 慎用嵌套解构作参数:一旦某层属性不存在(比如
opts.user.name但opts.user是undefined),会立即抛Cannot destructure property 'name' of 'undefined' - 数组参数解构较少见,但合法:
function first([head]) { return head; }→first([1,2,3])返回1
常见陷阱:null/undefined、引用与重新赋值
解构本身不创建新对象或数组,只是绑定已有值的引用。修改解构出的变量,一般不影响源数据——但若解构的是对象属性,而该属性本身是引用类型,就另当别论。
-
let obj = { list: [1, 2] }; const { list } = obj; list.push(3);→ 源obj.list也被改了,因为list和obj.list指向同一数组 - 对
null或undefined解构会直接报错:const { x } = null→TypeError;不能靠默认值兜底,必须提前判空或设参数默认值 - 解构赋值语句不能单独出现,比如
{ a, b } = data会报语法错误(被解释为代码块),必须加括号:({ a, b } = data)或放在let/const声明中
最常被忽略的是解构的“静默失败”边界:它只在结构完全不匹配时才报错,其余时候宁可给 undefined 也不中断。这意味着你得主动检查解构结果是否符合预期,尤其在处理 API 响应或用户输入时。











