一文搞懂ES6解构

ES6引入了一个新的语法特性，名为解构（destructuring），把这个功能可以看作是一个结构化赋值（structured assignment）方法。

1 解构简介

1.1 考虑下面的场景：给a,b,c赋值需要借用一个中间变量tmp

function foo() {
    return [1,2,3];
}
var tmp = foo(),a = tmp[0], b = tmp[1], c = tmp[2];
console.log( a, b, c ); // 1 2 3

1.2 有了数组解构后，代码可简化为下列代码,无需再借用中间变量

var [a,b,c]=foo()
console.log(a,b,c)// 1 2 3

1.3除了数组可以解构外，对象也可以解构，示例如下

function bar() {
    return {
        x: 4,
        y: 5,
        z: 6
    }
}
var {x:xx,y:yy,z:zz}=bar()//解构
console.log( xx, yy, zz );// 4 5 6

解释：var{x:xx,y:yy,z:zz}=bar()，其中x是源字段，是bar()中返回的字段；xx是目标字段，即将bar()中x的值赋值给字段xx。当然我们可以取bar()中的部分字段，例如var{x:xx,y:yy}=bar()，这样，一行解构语句即可实现提取所需字段且赋值给指定变量的功能。very nice！

2.解构是一个通用的赋值操作

2.1 解构不仅可以声明和赋值同时进行，也可以先声明变量，解构用于赋值

var a, b, c, x, y, z;
[a, b, c] = foo();
( { x, y, z } = bar() );//
console.log( a, b, c );// 1 2 3
console.log( x, y, z );/ 4 5 6

特别对于对象解构形式来说，如果省略了var/let/const声明符，就必须把整个赋值表达式用( )括起来。因为如果不这样做，语句左侧的{..}作为语句中的第一个元素就会被当作是一个块语句而不是一个对象。实际上，赋值表达式(a、y等)并不必须是变量标识符。

2.2 任何合法的赋值表达式都可以，示例如下

var o = {};
[o.a, o.b, o.c] = foo();
( { x: o.x, y: o.y, z: o.z } = bar() );
console.log( o.a, o.b, o.c );       // 1 2 3
console.log( o.x, o.y, o.z );       // 4 5 6

2.3 甚至可以在解构中使用计算出的属性表达式

var which = "x",
o = {};
( { [which]: o[which] } = bar() );
console.log( o.x );                 // 4

这个很有用，因为有时我们的变量名是动态的，需要通过取到另一个变量的值作为所需的变量名。

2.4 等号后面可以是任何数组或者对象，而不一定是返回数组或对象的函数

var o1 = { a: 1, b: 2, c: 3 },
o2 = {};
( { a: o2.x, b: o2.y, c: o2.z } = o1 );
console.log( o2.x, o2.y, o2.z );    // 1 2 3

2.5 可以把一个对象映射为一个数组

 var o1 = { a: 1, b: 2, c: 3 },
a2 = [];
( { a: a2[0], b: a2[1], c: a2[2] } = o1 );
console.log( a2 ); // [1,2,3]

2.6 可以把一个数组映射为一个对象

var a1 = [ 1, 2, 3 ],
o2 = {};
[ o2.a, o2.b, o2.c ] = a1;
console.log( o2 );    // {a: 1, b: 2, c: 3}

2.7 不用临时变量，交换两个变量

var x = 10, y = 20;
[ y, x ] = [ x, y ];
console.log( x, y );// 20 10

3.重复赋值

对象解构形式允许多次列出同一个源属性。举例来说：

var { a: X, a: Y } = { a: 1 };
X;  // 1
Y;  // 1

4.解构无法解除双向绑定，当取到的值是引用型时，如果将取到的值改掉，原值也将被修改

var X,Y;
( { a: X, a: Y, a: [ Z ] } = { a: [ 1 ] } );
X.push( 2 );
Y[0] = 10;
console.log(X);  // [10,2]
console.log(Y);  // [10,2]
console.log(Z);  // 1

ES6的解构介绍到这儿就全部结束了，希望能够对大家有些许帮助。