ES6 - Note2：解构赋值

ES6的解构赋值就是利用模式匹配从按照一定模式的数组或者对象中提取值赋值给变量。

1.数组的解构赋值

在ES6以前，变量的赋值是直接指定的，以后可以这么来写，如下所示

let [a,b,c] = [1,2,3];
console.log(a,b,c)
1 2 3

解构赋值只要等号两边的模式一致，便可解析成功，如下所示

var [d,[f,g]] = [3,[4,5]];
console.log(d,f,g);
3 4 5
-----------------------------
var [,,e] = [0,0,1];
console.log(e);
1
-----------------------------
var [f,...g] = [2,4,5,6,7];
console.log(g);
Array [ 4, 5, 6, 7 ]

如果解构不成功，则变量的值等于undefined，如下所示

var [x,y] = [1];
console.log(x,y);
1 undefined

不完全解构，即是等号左边部分匹配等号右边，如下所示

var [x,y] = [1,2,4];
console.log(x,y);
1 2
------------------------
var [[m],n] = [[1,2],3];
console.log(m,n);
1 3

如果右边是不可遍历的数据解构，解构将会报错，如下所示

var [x,y] = 1;
TypeError: 1 is not iterable

带默认值的解构赋值，如下所示

var  [x=‘hello‘,y="world"] = [];
console.log(x+‘ ‘+y);
hello world
//在ES6内部实现中，使用的是全等===来判断变量是否有值，因此变量的值不是严格的undefined，将不会采用默认值
var [w="hello",y="world"] = [,null];
console.log(w+‘ ‘+y);
hello null

2.对象的解构赋值

对象的解构是按照属性名来的，不分先后顺序，如下所示

var {y:j,x:i} = {x:1,y:2}
console.log(i,j);
1 2

如果解构的时候等号左边出现等号右边没有的属性，则变量的值为undefined。如下所示

var {y} = {z:‘hello‘};
console.log(y);
undefined

对象的解构也可以使用默认值，规则和数组解构一致

在使用已声明的变量进行对象解构赋值时，需要小心，因为大括号很有可能被解析器解析为代码块，如下所示

var x;
{x} = {x:1};
SyntaxError: expected expression, got ‘=‘
//这里需要用小括号括起来
({x} = {x:1});

3.字符串的解构赋值

字符串在进行解构赋值时会被转换层类数组，然后进行解析，如下所示

const [a,b,c] = "hello";
console.log(a,b,c);
h e l

var {length:len} = "test";
console.log(len);
4

4.函数参数的解构赋值

函数参数也可以使用解构赋值，如下所示

function test([x,y]){ return x+y; }
test([1,3]);
4

function test1({x=0,y=0}){ return x*y; }
test1({});
0
test1({x:4,y:5});
20

在解构赋值中，最好不要使用小括号。

解构赋值的用处也挺多的，比如在提取json数据，交换数据等地方