es6--解构

解构：解构是一种打破数据结构，将其拆分为更小部分的过程。

为什么使用解构

直接上个日常开发经常遇到的问题：

let options = {
    repeat:true,
    save:false
}

let repeat = options.repeat,
    save = options.save;

两个还好，如果options里还有更多的属性呢？一遍一遍的 "options." 估计会使你抓狂吧~

对象解构

let node = {
    type:'javascript',
    name:'index'
}

let {type,name} = node;  //对象解构

console.log(type);  //javascript
console.log(name);  //index

解构赋值

let node = {
    type:'javascript',
    name:'index'
};
let type = 'css',
    name = 'main';
    
({type,name} = node);  //注意（），下方tips中有解释

console.log(type);  //javascript
console.log(name);  //index

tips: 切记要用一对小括号包裹解构赋值语句，js引擎将一对开放的花括号视为一个代码块，语法规定，代码块语句不允许出现在赋值语句左侧，添加小括号后可以将块语句转化为一个表达式，从而实现整个解构赋值的过程。

解构默认值

使用解构赋值表达式时，如果指定的局部变量名称在对象中不存在，那么这个局部变量会被赋值为undefined。

let node = {
    type:'javascript',
    name:'index'
};

let {type,name,value} = node;

console.log(type);  //javascript
console.log(name);  //index
console.log(value);  //undefined

为解构变量添加默认值的做法和es6设置函数参数默认值的方法一样，只需在属性名称后添加 = 和相应的默认值就可以：

let node = {
    type:'javascript',
    name:'index'
};

let {type,name,value = 18} = node;

console.log(type);  //javascript
console.log(name);  //index
console.log(value);  //18

为非同名局部变量赋值

上面列举的所有示例都是局部变量的名字正好和对象的属性同名的情况，在真是的开发中当然不会有一直这么顺心的情况，那么，如何给与对象属性不同命的本地变量赋值呢：

let node = {
    type:'javascript',
    name:'index'
};

let {type:localType,name:localName} = node;

console.log(localType);  //javascript
console.log(localName);  //index

type:localType语法的含义是：读取名为type的属性并将其值存储在变量localType中，这种语法与传统对象字面量的语法相悖，使用的时候需要特别注意下。

当然，给非同名变量解构赋值的时候也可以设置默认值：

let node = {
    type:'javascript',
};

let {type:localType,name:localName = 'default'} = node;

console.log(localType);  //javascript
console.log(localName);  //default

嵌套对象解构

let node = {
    name:'index',
    loc:{
        start:{
            line:1,
            column:1
        },
        end:{
            line:1,
            column:4
        }
    }
}

let {loc:{start}} = node;

console.log(start.line);  //1
console.log(start.column);   //1

在这次解构模式中，我们使用了花括号，意义为在找到node对象中的loc属性后，应当深入一层继续查找start属性。在此次解构中，所有冒号前面的标识符都代表在对象中的检索位置，右侧为被赋值的变量名，如果冒号后是花括号，则意味着要赋予的最终值嵌套在对象内部更深层级中。

数组解构

跟对象解构相比，数组解构简单多了：

let colors = ['red','green','blue'];
let [firstColor,secondColor] = colors;

console.log(firstColor);  //red
console.log(secondColor);  //green

//如果只需要第三个值，或者中间的几个值不需要改怎么办
let [,,thirdColor] = colors;  //不需要的元素用","来进行占位即可

console.log(thirdColor);  //blue

解构赋值

数组解构 = 号左侧不需要用小括号包围，因为[]不会引起js引擎的误会

let colors = ['red','green','blue'];
let firstColor = 'black',
    secondColor = 'purple';

[firstColor,secondColor] = colors;

console.log(firstColor);  //red
console.log(secondColor);  //green

数组解构一个实用的小技巧-（交换两个变量的值）：

let num_a = 1;
let num_b = 2;
[num_a,num_b] = [num_b,num_a];

console.log(num_a);  //2
console.log(num_b);  //1

默认值

数组解构也可以添加默认值，当指定位置的属性不存在或值为undefined时使用默认值

let colors = ['red'];

let [firstColor,secondColor='green'] = colors;

console.log(firstColor);  //red
console.log(secondColor);  //green

嵌套数组解构

let colors = ['red',['green','lightgreen'],'blue'];

let [firstColor,[,secondColor]] = colors;

console.log(firstColor);  //red
console.log(secondColor);  //lightgreen

不定元素

es6函数参数中有个不定参数的概念，数组解构中有个与之相似的概念-不定元素。在数组中可通过...语法将数组中的其余元素赋值给一个特定的变量。
tips:数组解构中，不定元素必须是最后一个条目，否则会出现语法错误

let colors = ['red','green','blue'];

let [firstColor,...restColors] = colors;

console.log(firstColor);  //red
console.log(restColors);  //["green", "blue"]

不定元素的另一个用法是赋值数组：

let colors = ['red','green','blue'];
let [...cloneColors] = colors;

console.log(cloneColors);  //['red','green','blue']


//es5中可以通过concat来实现数组的复制
let cloneColors2 = colors.concat();
console.log(cloneColors2);  //['red','green','blue']

混合解构

let node = {
    type:'javascript',
    loc:{
        start:{
            line:1,
            column:1
        },
        end:{
            line:1,
            column:4
        }
    },
    range:[0,3]
}

let {
    loc:{end},
    range:[,endIndex]
} = node;

console.log(end.line);  //1
console.log(end.column);  //4
console.log(endIndex);  //3