前言
前端發(fā)展到今天幕帆，我們對ES6系列的語法糖已經(jīng)有了比較熟悉的了解燕刻。其中解構賦值在取值賦值這一塊給出了極大的便利。
解構賦值的前提
一般解構的是對象和數(shù)組或者是Set集合沫换。
結構賦值也分為：數(shù)組的解構賦值类浪， 對象的解構賦值载城。
首先拋出如何一句話理解解構賦值，然后我們再來進行結構賦值的具體分析费就；
重點來了诉瓦，取值操作的數(shù)據(jù)結構與賦值操作的數(shù)據(jù)結構一致
其本質(zhì)就是 左邊數(shù)據(jù)結構 = 右邊數(shù)據(jù)結構，就可以實現(xiàn)解構賦值力细。
數(shù)組的解構賦值
數(shù)組的解構睬澡，首先要明確解構的數(shù)據(jù)源必須是數(shù)組，同樣的還要確定是否定義了需要賦值的變量眠蚂。這樣才能較為完整的理解清除整個數(shù)組的解構賦值過程煞聪。
輸出的結果為：
很顯然的看出把arr數(shù)據(jù)源中的值都提取出來了。
現(xiàn)在是把數(shù)據(jù)源中數(shù)據(jù)完全取出來逝慧，如果是只取出數(shù)據(jù)源中的部分數(shù)據(jù)昔脯，我們該怎么辦呢？還是一句話：左邊數(shù)據(jù)結構 = 右邊數(shù)據(jù)結構 既可以實現(xiàn)數(shù)據(jù)的部分提取馋艺。
數(shù)據(jù)的解構賦值栅干，是以數(shù)組的索引來與接收變量進行對應的迈套。一個索引對用一個變量捐祠。
我們直接上代碼分析：
從上面代碼不難發(fā)現(xiàn)，在 let [year, blessing] = arr 這句話是在執(zhí)行解構賦值桑李。其year對應的是arr[0]中的值踱蛀，blessing對應的是arr[1]中的值。左邊是通過一個 [ ] 來與右邊 arr 數(shù)據(jù)結構進行對應
結合擴展運算符（...）我們可以實現(xiàn)一個變量接收多個索引的值（一個解構賦值中只能使用一次擴展運算符）贵白，它會把其他的數(shù)組索引的值封裝成一個數(shù)組率拒。但本質(zhì)沒有變。那就是解構賦值左右兩邊的數(shù)據(jù)結構沒有變禁荒。
查看blessing的輸出結果為：
從上面的代碼不難發(fā)現(xiàn)猬膨，數(shù)據(jù)結構層次沒有任何變化。
對象的結構賦值
與數(shù)據(jù)的解構賦值同樣的理解呛伴。其?左邊數(shù)據(jù)結構 = 右邊數(shù)據(jù)結構 就可以實現(xiàn)對象的解構賦值勃痴。
對象解構賦值谒所，是以對象中的屬性名與接收變量名來一一進行對應的
直接開始擼上代碼，這樣通透明了沛申。
在上面代碼中劣领， let {year, blessing } = obj 從數(shù)據(jù)解構層次上看， 左邊的數(shù)據(jù)結構與右邊的數(shù)據(jù)解構完全一致铁材，都是對象類型的尖淘。所以結果為：
當然這里又會重新提到擴展運算符（...）對此的實現(xiàn)（一個解構賦值中只能使用一次擴展運算符）。它會把其他屬性的值封裝成一個對象著觉。直接獻上代碼已經(jīng)結果：
輸出結果為：
對于上面來說村生，這些數(shù)據(jù)解構都顯得過于簡單了”穑可以試試復雜的數(shù)據(jù)和對象梆造，是否適應我所說的?左邊數(shù)據(jù)結構 = 右邊數(shù)據(jù)結構 的解構處理。
復雜的數(shù)組與對象對于解構賦值的處理
定義一個復雜的數(shù)組數(shù)據(jù)源葬毫。
對于這個復雜的數(shù)組镇辉，我夢如何去取出其skill里面的eat這個值呢？其實很簡單贴捡，依然遵循等式兩邊的數(shù)據(jù)解構一致忽肛。
這樣我們就可以取到值了。當然有人會奇怪為什么會在表達式的左邊多一個逗號烂斋，那是因為數(shù)組的取值是按照索引來進行的屹逛。
接下來我們定義一個復雜的對象數(shù)據(jù)源
對于這個復雜的對象數(shù)據(jù)源汛骂，我們?nèi)绾稳〕鲈趕kill數(shù)組中對象中的skill的值罕模？
直接獻上解構代碼。不難發(fā)現(xiàn)帘瞭，skill: test 是一個什么鬼淑掌？與上面的數(shù)據(jù)解構怎么不一樣了？其實本質(zhì)還是一樣的蝶念。skill: test是使用的一個對象解構賦值的別名抛腕。方便區(qū)分在一個對象中不同數(shù)據(jù)層級的具有相同屬性名的區(qū)分。但數(shù)據(jù)解構層次的還是沒有任何變化媒殉。
總結：在解構賦值過程中担敌，理解好這句話：取值操作的數(shù)據(jù)結構與賦值操作的數(shù)據(jù)結構一致，再難的解構也能夠?qū)懗鰜怼?/p>
原創(chuàng)文章轉(zhuǎn)載請注明出處：http://www.reibang.com/p/4a8998340d78
