话说，解构无处不在啊，鄙人自从用了vue写项目以来，总是遇到各路大神莫名其妙的写法，然并未出任何错，查之，然解构也，呜呼哀哉，进而习之。
解构（Destructuring）：是将一个数据结构分解为更小的部分的过程。ES6中，从数组和对象中提取值，对变量进行赋值。
解构有什么用处呢？可以大大的简化数组或者对象里面的元素的赋值语句。
数组解构，数组本身并没有发生任何的改变，解构是对新的变量（可能是对象同名属性）赋值。
//变量的声明 let [a,b,c] = [1,2,3];
//嵌套解构 let [foo,[bar],baz] = [1,[2],3];
//类似函数的剩余参数，数组解构有个类似的，剩余项的概念。 ...tail，里面的tail就是剩余项，也是个数组 let [head,...tail] = [1,2,3,4]; //head:1,tail:[2,3,4] let [x,y,z] = new Set(['a','b','c']); //解构允许指定默认值 let [foo = true] = []; //foo:true let [x,y='b'] = ['a']; //x = 'a',y = 'b'
如果你只想获取数组中的第三个元素，则不必给前两项提供变量名。栗子如下：
let colors = ["red","green","blue"]; let [,,thirdColor] = colors; console.log(thirdColor) //blue
JS中有个被遗漏的功能：克隆数组，ES5中用concat，用来合并数组，如果不传递任何参数，就是原数组的克隆品。ES6中可以使用剩余项达到同样的效果：
let colors = ["red","green","blue"]; let [...cloneColors] = colors; console.log(cloneColors) //["red", "green", "blue"]
本例中剩余项将colors数组的值复制到cloneColors数组中，这个技巧值的关注。。。剩余项是数组解构模式中最后一项，后面不能有逗号。。。
对象的解构：
let {foo,bar} = {foo:"aaa",bar:"bbb"};
//实例举例，下面的变量x就是1，y是2，c为定义是is no defined
var obj = {x:1,y:2,c:1};
let {x,y} = obj;
let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined
//如果对象的属性已被变量赋值，再次赋值时候需要用圆括号括起来，因为花括号里面并不是块语句，而是解构赋值表达式。
let node = {
type:'Identifier',
对象的解构变量必须与属性同名，才能取到争取的值。而且对象的属性是没有次序的，而数组的元素是按次序排列的。如果想要变量名和属性名不一致，那么必须这样写：
let {foo:baz，hand:lochand = 'eart'} = { foo: "aaa", bar: "bbb" }; baz //'aaa',此时的foo就是未定被定义的，定义的变量只有baz
lochand //'eart' 此时的hand虽然undefined，但是lochand有被初始化 let {foo:foo,bar:bar} = {foo:"aaa",bar:"bbb"}
实际上也说明，对象的解构赋值是内部机制，先找回同名属性，再赋值给对应的变量，真正被赋值的是后者。现在已经掌握了如何对属性值为基本类型值的对象进行解构，而对象解构也可被用于从嵌套的对象结构中提取属性值。（嵌套对象表示：对象的属性可能还是一个对象）举个例子：
let node = { type:'Identifier', name:'foo', loc:{ start:{ line:1, column:1 }, end:{ line:1, column:4 } } }; let {loc:{start}} = node;
console.log(start) //{line: 1, column: 1}、
let {loc:{start:localStart}} = node;
console.log(localStart) //{line: 1, column: 1}
嵌套对象的模式，里面使用了{}，表示在node对象的loc属性内部寻找start属性。每当有个冒号在结构模式中出现，冒号之前的标识符代表需要检查的位置，冒号右侧则是赋值的目标；当冒号右侧存在花括号时，表示目标被嵌套在对象的更深层次中。
在对象的嵌套解构中也是可以给本地变量使用不同的名称，看上面的栗子(node.loc.start的值被存储在一个新的本地变量localStart上)：
混合解构：
对象和数组解构能被组合使用，以创建更复杂的解构表达式。栗子如下：
let node = { type:'Identifier', name:'foo', loc:{ start:{ line:1, column:1 }, end:{ line:1, column:4 } }, range:[0,3] }; let { loc:{start}, range:[startIndex] } = node; console.log(start,startIndex); //{line: 1, column: 1} 0
上面的代码提取出node.loc.start和node.range[0]，并将它们的值分别存储在start和startIndex上。
参数解构：
解构还有一个很有用的场景，在传递函数参数时，当JS函数接收大量可选参数时，一种常用模式是创建一个包含附加参数的options对象：
function setCookie(name,value,options){ options = options || {}; let secure = options.secure, path = options.path, domain = options.domain; } setCookie("type","js",{ secure:true, path:'http://baidu.com' })
name和value参数是必需的，而options中的secure，path等是可选的。参数解构提供了更清楚标明函数期望输入的替代方案。用对象或数组解构的模式替代了具名参数。看上面的栗子，解构参数在未传递值的情况下会被设定为undefined，类似于常规参数。
圆括号和解构赋值的关系：
只要有可能导致解构歧义，就不得不使用圆括号。
let x = 2; ({x} = {x:1});
console.log(x) //1 //对象的解构赋值可很方便的将现有对象的方法，赋值到某个变量 let {log,sin,cos} = Math; //由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构 let arr = [1,2,3]; let {0:first,[arr.length-1]:last} = arr; first //1 last //3
对于字符串，数字，布尔值的解构赋值规则：只要等号右边的值不是对象或者数组，就先将其转化为对象，undefined和null是无法转化为对象，所以对它们进行解构赋值会报错。
[[1,2],[3,4]].map(([a,b]) => a+b) //[3, 7]
对于函数的解构赋值，可以将形参以数组的形式传入，如上，数组参数被解构成变量a和b，对于函数内部就只是参数a，b。
用途：
1，变量交换：看起来如同镜像。赋值语句的左侧的解构模式，右侧是临时创建的数组字面量。x被赋值为数组中的y，y被赋值为数组中的x。
let x = 1; let y = 2; [x,y] = [y,x]
2,函数返回多个值
function example(){return [1,2,3]} let [a,b,c] = example(); function example(){return {foo:1,bar:2}} let {foo,bar} = example();
3,函数参数的定义
解构赋值可以方便的将参数和变量名对应起来，可以无次序
function f({x,y,z}){...} f({z:2,y:8:x:9})
4,提取JSON数据，有关json的提取就是对象的解构赋值而已。
5，函数参数的默认值
指定参数的默认值，就避免了在函数体内再写 || 语句。
jQuery.ajax = function(url,{ async = true, beforeSend = function(){}, cache = true, complete = function(){}, crossDomain = false, global = true, } = {}){ }
//这种写法有个缺点，当传入参数值为null时会引发程序异常。因为null和undefined是无法被解构的。
6，输入模块的指定方法
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
关键字：【对象】【数组】【参数解构】
古今之成大事业，大学问者，必经过三种之境界：“昨夜西风凋碧树。独上高楼，望尽天涯路。”此第一境也。“衣带渐宽终不悔，为伊消得人憔悴。”此第二境也。“众里寻他千百度，蓦然回首，那人却在灯火阑珊处。”此第三境也。 ——王国维《人间词话》