ES6解构赋值

  解构赋值可以将数组的元素或者对象的属性赋予给另一个变量，该变量的定义语法与数组字面量或对象字面量很相似。语法非常简洁，相比于传统的属性访问方式，更加直观清晰。

解构数组

const [first, second, third, four] = [1, 5, 11, 9];
console.log(second);   // 5

  解构赋值同样可以用于数组嵌套的情况。左右两侧的格式需要保持一致

const [foo, [[bar], baz]] = [1, [[10], 11]];
console.log(bar);  //10

  左侧的变量列表还可以是一种包含连续逗号的形式跳过右侧对应的值：

const [, , third] = ['foo', 'bar', 'baz'];
console.log(third);  //baz

  ES6提供了一种将右侧多余的值以数组的形式赋值给左侧变量的语法'rest'模式：

const [head, ...tail] = [1, 2, 3, 5];
console.log(tail); // [2, 3, 5]

解构对象

  在对象中使用解构赋值，允许为对象的不同属性绑定变量名。这种情况下，解构赋值的左侧部分类似一个对象字面量，对象中是一个键值对的列表，属性名称位于键值对内冒号左侧，变量名称位于键值对内冒号右侧，每一个属性都会去右侧对象中查找相应的赋值，每一个值都会赋值给它对应的变量。

const robotA = {name: 'Bander'};
const robotB = {name: 'Flexo'};

const {name : nameA} = robotA;
const {name : nameB} = robotB;

console.log(nameA);  //Bander
console.log(nameB);  //Flexo

  当属性名称和变量名称相同时，可以这样写：

const { foo , bar } = {foo: 'tom', bar: 'lilei'};
console.log(foo);  //tom

  就像嵌套数组可以用解构赋值一样，嵌套对象也可以用解构赋值，而且两种还可以结合在一起使用。

const test = {
    testArr : [
        'lilei',
        { femal: 'hanmeimei' }
    ]
};
const { testArr : [first, {femal}] } = test;

console.log(first); // lilei
console.log(femal); // hanmeimei

  使用解构赋值访问对象中未定义的属性，将会得到undefined:

const { name } = {};
console.log(name); // undefined

  对null或者undefined使用解构赋值时，将会抛出一个错误。

const { lilei } = null;
const { hanmeimei } = undefined;
// Uncaught TypeError: Cannot match against 'undefined' or 'null'.

  对其他原始类型，如数字、布尔值、字符串使用解构赋值，会得到undefined。注意：对NaN使用解构赋值，也会得到undefined

默认值

  对于值和属性未定义的数组与对象，可以运用解构赋值的方式为其设置默认值：

const [ testArr = 12 ] = [];
console.log(testArr); //12

const { testObj: testMessage = 'speak something'} = {};
console.log(testMessage); // speak something

const { testData = 66 } = {};
console.log(testData); // 66

实际应用

  我们平时在开发的时候，经常把一个对象用作函数的参数。通常这个对象拥有好多属性，以便暴露更多的便于我们使用的API。我们对参数对象使用解构赋值，这样在访问对象属性时，就可以避免重复调用该参数对象。

function fetch(url, {body = '', method = 'get', data = ''}) {
    console.log(url + '-' + body + '-' + method + '-' + data);
}
fetch('http://www.baidu.com', {}); //http://www.baidu.com--get-

  上面代码只用到了对象的解构赋值，并没有使用函数参数的默认值。只有当函数的参数是一个对象时，变量才会通过解构赋值生成，如果调用的时候没有传这个参数，就会报错了。通过提供函数参数的默认值，就可以避免这种情况。

function fetch(url, {body = '', method = 'get', data = ''} = {}) {
    console.log(url + '-' + body + '-' + method + '-' + data);
}
fetch('http://www.baidu.com'); //http://www.baidu.com--get-