ES6之变量解构

在上一章中，我们了解到ES6的变量声明及作用域，今天本章我将分享ES6中的变量解构赋值，在JavaScript中我们对一个变量的赋值很容易，如：

var temp_1 = 1, temp_2 = 2, temp_3 = 3;

var [temp_1, temp_2, temp_3] = [1, 2, 3];
console.log(temp_1, temp_2, temp_3);

如上所示，ES6可以从对应的数据中提取出值，赋给同样索引的变量，这被称为“模式匹配”。

模式匹配中，需要提取到值，必须“左边模式”与右边变量结构一致，否则取值为undefined。在模式匹配中，也可以嵌套匹配和不完本匹配，如下：

示例一：

var [temp_1, [temp_2],temp_3] = [1, [2], 3]; //嵌套匹配
console.log(temp_1, temp_2, temp_3);  // 1, 2, 3

示例二：

var [temp_1, temp_2] = [1, 2, 3]; //不完全匹配
console.log(temp_1, temp_2); // 1, 2

示例三：

var [temp_1, temp_2, temp_3] = [1, 2]; //不完全匹配
console.log(temp_1, temp_2, temp_3); //1, 2, undefined

示例四：

var [,,temp_1]  = [1, 2, 3]; //不完全匹配
console.log(temp_1); // 3

上述示例所有情况包含了大部份解构情况，注意，不可使用数据结构不同的情况下进行解构。如：

var [temp_1] = 1;
var [temp_1] = {};
var [temp_1] = new Temp();

ES6解构语法中，也可以在模式中使用默认值，如：

示例1：

var [temp_1, temp_2 = 2] = [1];
console.log(temp_1, temp_2);  // 1, 2

示例2：

var [temp_1, temp_2 = temp_1] = [1];
console.log(temp_1, temp_2) // 1, 1

示例3：

var [temp_1, temp_2 = temp_1] = [1, 2];
console.log(temp_1, temp_2); // 1, 2

在上述示例中，默认值的使用是先匹配，后赋值的原理进行的，由此，不能将后者temp_2变量赋值给前者temp_1，这一点必需要牢记。

同样的道理，对象解构与数组解构是一样的用法，只要左边与右边数据结构一致，是可以进行解构的， 如：

示例1：

var { id, name, age } = { id : 1, name : 'test', age : 11 };
console.log(id, name, age); // 1， test, 11

示例2：

var { id, name, age, role: [r1, r2, r3] } = {id : 1, name : 'test', age: 22, role: ['测试', '研发','admin']}; 
console.log(id, name, age, r1, r2, r3);  //1, test, 22, 测试，研发， admin

示例3：

var {id, name, age, role : {r1, r2, r3 }} =  {id : 1, name : 'test', age: 22, role: {r1 : '测试', r2 : '研发', r3 : 'admin'}}; 

对象解构中，一定要区分什么是模式，什么是变量，在上述例子中role是模式，而r1,r2,r3是变量。

解构的使用场景：

示例1：

var a = 1, b = 2;
var [a, b] = [b, a] ;  

示例2：

function test([a, b, c = b]) {
       return a + b + c;
} 
test([1, 2]);

示例3：

function test({a, b, c = b}){
         return a + b + c;
}
test({b : 5, a : 1});

示例4：

function test(){
      return [1, 2, 3];
} 
var [result_1, result_2, result_3] = test(); 

到此处，相信大家已知道解构是如何运作的，以及解构的作用，在此提醒大家在使用解构时，一定要知道什么是模式，什么是变量，而且解构必须要实现Iterator接口对象才能使用，这一点很重要。