ES6 变量解构赋值详解:数组与对象模式匹配
本文深入解析 ES6 中的变量解构赋值语法,涵盖数组与对象的模式匹配规则。详细讲解不完全解构、Iterator 接口应用、严格等于判断默认值生效条件、惰性求值及嵌套对象处理,帮助开发者掌握现代 JavaScript 的核心特性。
ES6 变量解构赋值概述
变量的解构赋值
在 ES6 标准中,开发者可以依据特定的模式,从数组或对象中提取值,并将其赋值给变量。
数组解构赋值规则
数组的解构赋值
var [a,b,c] = [1,2,3];
a // 1;
b // 2;
c // 3;
上述代码展示了如何从数组中提取值,并依据位置对应关系将值赋给相应的变量。
这种写法本质上属于“模式匹配”,即只要等号两侧的模式结构一致,左侧的变量就会被赋予右侧对应的值。
let [foo,[[bar],baz]] = [1,[[2],3]];
foo //1;
bar //2;
baz //3;
let [,,third] = ['foo','bar','baz'];
third //'baz'
let [head,...tail] = [1,2,3,4]
head //1;
tail //[2,3,4]
若解构操作未能成功匹配,变量的值将默认为 undefined。
let [x,y,z] = ['a']
x // 'a';
y // undefined
z //[]
不完全解构
当等号左侧的模式仅匹配右侧数组的部分元素时,解构依然能够成功,这种现象被称为不完全解构。
let [x,y] = [1,2,3]
x //1
y //2
若等号右侧的数据不具备可遍历结构(即不是数组),程序将会抛出错误。
只要某种数据结构拥有 Iterator 接口,即可采用数组形式的解构赋值。
function* fibs(){
var a = 0;
var b = 1;
while(true){
yield a;
[a,b] = [b,a+b];
}
}
var [first,second,third,fourth,fifth,sixth] = fibs();
sixth // 5
fibs 是一个 Generator 函数,原生具备 Iterator 接口,解构赋值会依次从该接口中获取值。
解构默认值机制
默认值
解构赋值语法允许为变量指定默认值。
var [foo=true] = [];
foo //true
ES6 内部使用严格等于运算符(===)来判断位置是否有值。因此,只有当数组成员严格等于 undefined 时,默认值才会生效;否则默认值无效。
var [x = 1] = [undefined]
x // 1
var [x = 1] = [null]
x // null
默认值可以是表达式。若指定表达式作为默认值,则该表达式采用惰性求值策略,仅在变量实际被使用时才会计算。
function f(){
console.log('aaa')
}
let [x = f()] = [1]
在上述代码中,函数 f 未被执行,因为变量 x 成功获取到了值。
默认值可以引用解构赋值过程中已声明的其他变量,但该变量必须在引用前完成声明。
对象解构赋值详解
对象的解构赋值
解构赋值不仅适用于数组,同样也适用于对象。
var {foo,bar} = {foo:'aaa',bar:'bbb'}
foo // 'aaa'
bar // 'bbb'
与数组按次序取值不同,对象的属性没有固定顺序,变量必须与属性名同名,才能正确获取到值。
var {bar,foo} = {foo:'aaa',bar:'bbb'}
foo //'aaa'
bar //'bbb'
var {baz} = {foo:'aaa',bar:'bbb'}
baz //undefined
如果变量名与属性名不一致,必须采用特定的写法格式。
var {foo:baz} = {foo:'aaa'}
baz //'aaa'
实际上,上述对象的解构赋值是以下形式的简写版本。
var {foo:foo,bar:bar} = {foo:'aaa',bar:'bbb'}
对象解构赋值的内部机制是先查找同名属性,再将其赋值给对应的变量。真正被赋值的是变量本身,而非属性名。
然而,采用上述写法时,变量的声明与赋值是同步进行的。对于 let 和 const 声明的变量,由于不能重复声明,若赋值的变量此前已声明过,程序将报错。
对象的解构赋值同样支持嵌套结构的对象。
var obj = {
p: [
'hello' ,
{
y : 'world'
}
]
}
var {p:[x,{y}]} = obj
x //'hello'
y //'world'
在此情况下,p 仅作为模式存在,并非变量,因此不会被赋值。
对象解构也可以指定默认值,其生效条件是对象属性值严格等于 undefined。
var {x=3} = {x:undefined}
x //3
var {x=3} = {x:null}
x //null
若解构模式涉及嵌套对象,且子对象所在的父属性不存在,程序将会报错。
var {foo:{bar}} = {baz:'baz'}
总结
以上就是本文的全部内容,希望这些内容能帮助大家学习或使用 ES6。如有疑问,欢迎留言交流。
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
JavaScript函数定义的三种方式:声明、表达式与箭头函数
2026-11-05 13:50:55
JavaScript中escape、encodeURI和encodeURIComponent对空格的处理差异
2026-11-05 12:47:23
