上一篇我們談到es6在變量聲明這一塊的小改動，忘記的小夥伴們可以戳這裏複習：變量聲明
今天來探討一個新問題：
之前在我們開發的過程中，難免會碰到這樣的情況：
後端傳給我們一串數據，然後我們需要對這個數據進行處理。
如果是這樣的一個數據：
let obj = {
username:'webpilot',
userid:12831,
profession:'webDeveloper',
region:'beijing'
}
然後我們需要用變量去保存這些數據，那麼我們可能會這麼操作：
let username = obj.username,
userid = obj.userid,
profession = obj.profession,
region = obj.region;
這麼做能取到值，這沒問題，不過我們需要思考一個問題，現在這個對象裏面只有四個鍵值對。
這麼處理起來也不算麻煩，但是如果哪一天對象裏面有100個鍵值對，怎麼辦呢？
這種極端的情況不是沒有，當然我們可以通過一些其他的手段進行規避，這不在今天的討論之列。
一、什麼是解構賦值？
所以當我們有很多個鍵值對的時候，這麼去取值就顯得有點笨拙了。
所以es6提出來了一個新的東西，叫解構賦值，就是用來處理這件事情的。
那麼有了解構賦值之後，上面的需求我們可以這麼操作：
let obj = {
username:'webpilot',
userid:12831,
profession:'webDeveloper',
region:'beijing'
}//同樣還是這個數據
let {username,userid,profession,region} = obj;
console.log(username);//webpilot
可以看到在這段代碼裏面我們直接在let關鍵字後面用花括號包起來一堆變量，然後直接讓它們等於obj。
其實這個操作就是從obj裏面取出前面花括號裏面變量所對應的值，並且對應的賦值給花括號裏面的對象。
這就是所謂的解構賦值了。
先聲明變量，然後再解構賦值怎麼操作？
當然在這裏有一種情況比較特殊，剛纔我們是在聲明變量的同時給這個變量賦值。
那如果我原本就已經聲明好變量了，然後在後面的代碼中需要讓這個變量等於對象裏面的某一項，用結構賦值的話怎麼做呢？
來看一下，這其實是一個小技巧：
let obj = {
username:'webpilot',
userid:12831,
profession:'webDeveloper',
region:'beijing'
}//同樣還是這個數據
let username = '';//這個變量已經提前聲明好了
{username} = obj;//在這裏想要讓變量等於對象中的某一項，那這麼操作是會報錯的。這裏涉及到塊級作用域的問題，username外面的大括號是一個塊級作用域，所以會出問題
//解決方法
({username} = obj);//把他們用括號包起來，當做一個整體就可以了
解構賦值的時候，我想用別的名字怎麼辦？
還有一種情況，那就是我結構賦值的時候，不想用對象裏面的名字，覺得它太長了，或者其他什麼原因我想給解構出來的變量換一個名字，怎麼辦呢？
看操作：
let obj = {
username:'webpilot',
userid:12831,
profession:'webDeveloper',
region:'beijing'
}
//還是上面的數據，現在我想取其中的username的值，但是我覺得username太長了，我想給它換一個變量名稱解構出來。那麼這時候我們可以這麼操作
let {username:n} = obj;
console.log(n);//webpilot
可以注意到在解構賦值的時候是以鍵名對鍵值的方式去寫的變量：{username:n} 這裏其實就是關鍵。
這看着像是一個對象中的鍵名和鍵值，不過在解構賦值中它所代表的意思是 ：
從obj中取出"username"這個值，並且把這個值賦給新聲明的變量"n".
所以在這裏要注意的是：
新聲明的變量是“n” 而不是別的，在後面用的時候也只能用“n”這個變量。
取值的時候，如果沒有取到，希望賦給一個默認值？
在我們取值的過程當中呢，有些對象中可能沒有這個值，那麼這時候我們得到的就是undefined, 這時候程序就會出現一些問題；
那麼在解構賦值中，我們有一個小方法可以解決這個問題，那就是在取值的時候，先給這個變量一個默認值。
如果取到了，就用對象裏的值，如果沒有取到，則用默認值。
看操作：
let obj = {
username:'webpilot',
userid:12831,
profession:'webDeveloper',
region:'beijing'
}
//還是上面的數據，現在我想取其中的abc的值，但是abc在對象中可能存在可能不存在，這時候我們應該給abc一個默認值來避免掉一些程序上的問題
let {abc=123} = obj; //這一步就是在解構賦值的時候，直接給abc賦予了一個默認值 123
console.log(abc);//123 // 現在obj中是沒有abc這個值的，所以得到的就是默認值
let {username='name'} = obj;
console.log(username);// webpilot
從上面可以看到，對象obj中並沒有abc這個值，如果我們按照之前的方法直接去取值，那麼得到的毫無疑問就是undefined.
所以如果給它一個默認值，就能避免掉很多問題。
而如果我們用同樣的設置默認值的方法去取對象中已經存在的值，那麼這時候得到的值就是對象中的值了。
另外默認值的設置和上面別名的設置是可以同時使用的，也就是說我們可以寫這樣的代碼：
let {username:abc=123} = obj;
以上我們說的都是對對象的解構賦值。
二、數組的解構賦值
數組也是可以被解構賦值的，不過在這裏有幾個不同點稍微提一下大家就明白了。
首先是解構賦值的時候，對象用的是 “{}” 而數組，同理推一下也應該知道要用 “[]” 中括號，
所以數組在解構賦值的時候是這樣寫的 ：
let arr = ['a','b','c','d','e','f','g'];
let [first,second,third] = arr;
console.log(first,second,third);//a b c
可以看到上面就成功賦值了，不過在這裏還有一點不同：
對象的解構賦值是根據鍵名來查找值的，而數組的解構賦值是根據下標來查找值的。
這句話的意思是，上述代碼中 first得到的值永遠是數組arr中存的第一個值，而不管這個值是什麼。
最後數組解構賦值的時候也可以用別名，也可以用默認值設置。以上就是ES6中的解構賦值啦~
摘至開課吧前端團隊，閱讀後頗有收穫分享至此，希望對大家有所幫助~