ES6 解构赋值教程：数组、对象、默认值与嵌套结构解析

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。如有疑问，欢迎留言交流。

ES6 变量解构赋值详解：数组与对象模式匹配

ES6 变量解构赋值概述

数组解构赋值规则

解构默认值机制

对象解构赋值详解

实用工具推荐