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

 關鍵字：【對象】【數組】【參數解構】

古今之成大事業，大學問者，必通過三種之境界：「昨夜西風凋碧樹。獨上高樓，望盡天涯路。」此第一境也。「衣帶漸寬終不悔，爲伊消得人憔悴。」此第二境也。「衆裏尋他千百度，驀然回首，那人卻在燈火闌珊處。」此第三境也。   ——王國維《人間詞話》