es6的解构函数

话说，解构无处不在啊，鄙人自从用了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',

     name:'foo'

  },type = "Literal",name = 5;

  ({type,name} = node);

  console.log(type,name); //Identifier foo

对象的解构变量必须与属性同名，才能取到争取的值。而且对象的属性是没有次序的，而数组的元素是按次序排列的。如果想要变量名和属性名不一致，那么必须这样写：

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'
})

function setCookie(name,value,{secure,path,domain}){

     //设置cookie的代码

} 

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 //
last //

对于字符串，数字，布尔值的解构赋值规则：只要等号右边的值不是对象或者数组，就先将其转化为对象，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'

关键字：【对象】【数组】【参数解构】

古今之成大事业，大学问者，必经过三种之境界：“昨夜西风凋碧树。独上高楼，望尽天涯路。”此第一境也。“衣带渐宽终不悔，为伊消得人憔悴。”此第二境也。“众里寻他千百度，蓦然回首，那人却在灯火阑珊处。”此第三境也。   ——王国维《人间词话》