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 // undefinedz //[]

不完全解构

如果等号左边的模式只匹配等号右边数组的一部分，解构依然可以成功，这种情况叫做不完全解构。

let [x,y] = [1,2,3]x //1y //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 // 1var [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'