ES6 解構賦值

　　解構賦值，就是怎麼快速地從對象和數組中獲取到你想要的數據。對象的結構賦值和數組的解構賦值用法差很少，只不過解構賦值的方式不一樣，一個是依據的是屬性，一個依據的是數組的索引。先來看對象的解構賦值。看一個實例就知道怎麼使用了，語法很簡單

let person = {
    name: 'sam',
    age: '28'
};

let {name, age} = person; //  解構賦值
console.log(name, age) // 'sam' 28

　　對象字面量的方式聲明瞭兩個變量name 和age, let {name, age} 放到了等號的左邊， 右邊就是咱們要想從中獲取數據的對象。賦值的依據就是對象的屬性，咱們聲明的變量名和對象的屬性名一致。對象的解構賦值就是對對象進行分解，從對象中找出和咱們聲明的變量名一致的屬性名，而後把屬性值賦值給對應的變量。這時，你也很容易發現一個問題，當聲明的變量名，在對象中沒有對應的屬性名呢，那怎麼辦？很簡單，這個變量取值undefined. 

let {job } = person; 
console.log(job) // undefined

　　但有時候，你並不想這個變量取值undefined, 那就給它一個默認值。默認值的方式和函數的默認參數同樣，直接使用= 進行賦值。

let {job = 'web' } = person; 
console.log(job) // web

　　還有一個問題，聲明的變量名必須和對象的屬性名一致嗎？我能不能聲明其餘的變量名，也能獲取到對象屬性的值？固然能夠，不過語法稍微複雜了一點

let {name: localName } = person; 
console.log(localName) // sam

　　語法爲{對象的屬性名： 聲明變量名}， 意思是獲取到對象中name 屬性對應的值，而後把它賦值給 localName變量，因此，在這種狀況下，是不能訪問name的，不然會報錯。固然在這種賦值方式下，也能夠提供默認值，由於咱們始終是從對象中獲取屬性值，很容易取到對象中沒有的屬性

let {job: localJob = 'web' } = person; 
console.log(localJob) // sam

　　取person 對象中的job 屬性的值，賦值給localJob 變量，很明顯，賦值的是undefined, 由於person 中沒有job 屬性，localJob 變量也就取值undefined, 有必要給它提供一個默認值。

　　以上都是聲明變量，使用解構賦值，其實單純的賦值也能夠是使用解構賦值。變量以前就已經聲明瞭，咱們只想給已聲明的變量賦值，那就直接把變量放到大括號裏面，再放到等號的左邊，右邊放要解構的對象

let person = {
    name: 'sam',
    age: '28'
};

let age = 10;
({age} = person) // 只是賦值，注意要把解構表達式放到小括號裏面

　　要注意一點，使用解構的方式，只進行賦值操做時，要把整個表達式用小括號括起來。若是不用括號括起來，{age} = person,  第一個{ 會被js 解析爲塊級做用域的開始，你不能給一個做用域賦值，因此就會報錯。像{age} = person 這樣的解構賦值表達式，賦值完以後，整個表達式的值仍然是=後面的對象，提及來可能有點不太理解，舉個例子就簡單了

let age = 10;
let obj;
obj = {age} = person;

console.log(age, obj) // 28 { name: 'sam', age: '28' }

　　看一下obj = {age} = person;  賦值操做都是從右邊開始計算， 先{age} = person person 對象進行解構賦值，而後再賦值給obj. 正如剛纔所說，解構賦值表達式最終的結果是=後邊的對象， {age} = person 解構賦值完成之後獲得的值是person 對象，而後把person 對象賦值給了obj, 如今obj === person 爲true.

　　嵌套對象也能夠進行解構，只不過語法看起來有點彆扭。

let person = {
    address: {
        province: '廣東',
        city: '深圳'
    }
}

let {address: {province}} = person;
console.log(province)

　　person 對象嵌套了address 對象，那怎麼找到address 對象中的屬性呢？確定是先找address 屬性，只有找到它，才能找到它下面的屬性。address 屬性的解構就和普通解構沒有什麼區別，let {address} = person.  如今就是向下一步，解析address. 解析address， 無非就是把address 賦值給另一個解構對象， let {province} = address. address 怎麼賦值給別的對象呢？ 在解構中使用的是冒號  let {address: anotherAddress} = person.  咱們把anotherAddress 換成{province} 又能夠了。 let {address: {province}} = person, 沒有問題了。嵌套解構，至關於找到了一個address 屬性， 把它賦值給一個匿名的變量（：右側是要賦值給的目標），正好，這個匿名的變量是一個對象，又能夠按照解構的方式取對象裏面的屬性值{province} 就產生了。

 　　說完了對象的解構賦值，再說一下數字的解構賦值。數組的解構賦值和對象的解構賦值用法同樣，只不過語法不一樣。數組要用數組字面量的方式來解構賦值，也就是說，聲明變量的時候，把變量放在數組字面量中。

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

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

　　那數組是怎麼實現解構賦值的？ 用的是位置或索引，由於數組的元素的排列都是有順序的，第一個元素就是在數組的第一個位置上，因此聲明變量的時候，第一個變量就對應數組中的第一個位置的元素，第二個變量對應數組中第二位置的元素， firstColor 就對應數組中的第一個值 'red', secondColor 就對應數組中的第二個值'green'.  那若是隻想獲取第二個值呢？ 第一個變量就不用聲明瞭，直接寫一個逗號，

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

console.log( secondColor); // green'

　　一個逗號表明的就是一個位置。數組的解構賦值就是位置的一一對應，咱們想要數組中哪一個元素的值，聲明的變量就要放到哪一個位置上，若是這個位置是中間位置，而前面的元素你有不想要，那就用逗號隔開，好比你想要第六位置的元素的值，前面就是5個逗號。

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

　　固然對於這個例子來講，沒有太大的意義，由於colors 數組只有兩個元素， 第六位置上確定沒有值。 sixColor 若是沒有獲取到值，確定是undefined， 這時也能夠給它一個默認值。

let [,,,,, sixColor = 'black'] = colors;

　　和對象的解構賦值同樣，除了聲明時的解構賦值外，直接給變量賦值也是沒問題的 。

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

[ firstColor, secondColor ] = colors;
console.log(firstColor, secondColor); // "red" "green"

　　這種解構賦值的方式有一個巨大的做用，咱們能夠很輕鬆的交換兩個變量的值。

let x = 1, y = 2;

[y, x] = [x, y];

console.log(x, y); // 2 1

　　再來簡單的看一下嵌套數組的解構賦值，一個例子就很明顯了。

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

let [ firstColor, [ secondColor ] ] = colors;
console.log(firstColor, secondColor); // "red" "green"

　　數組解構賦值的時候，能夠看作把colors 的第二項賦值給一個匿名變量，這個變量正好也是一個數組，順便就再進行一次解構賦值。能夠看到嵌套數組的解構賦值，就至關於比着葫蘆畫瓢， 要解構的數組長什麼樣，聲明變量的時候所用到的數組格式就長什麼樣，只不過它裏面放到都是變量，變量和數組元素的一一對應。

　　除了和對象的解構賦值相同點以外，數組解構還可使用... 操做符， 用法和函數的參數使用方法同樣，把剩餘的元素收集起來。

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

let [ firstColor, ...restColor ] = colors;
console.log(firstColor); // "red" 
console.log(restColor); // [ 'green', 'lightgreen', 'blue' ]

　　解構賦值的另一個做用是函數參數的定義，解構賦值的核心就是賦值，只要是賦值的地方，咱們均可以用解構賦值表達式。函數的參數正好也是賦值，函數調用的時候就是把實參的值賦值給形參，那麼形參的定義，就可使用解構賦值的聲明變量的方式，原來，咱們的形參直接定義一個options , 如今就能夠定義成options 要接受的內容。{method, time}

function getRequest(url, {method,time}) {
    
}

　　這樣函數的使用就會更加的方便，一看函數聲明就知道傳遞什麼參數，還可給它賦值一個默認的參數，這樣函數的運行就更加不會出錯。

function getRequest(url, {method = "get",time = "2000"} = {}) {

}