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