es6變量解構與函數解構

1、變量的解構 1.什麼是解構？ es6容許按照必定的模式，從數組和對象中提取值，對變量進行賦值，被稱爲解構（Destructuring） 對變量進行批量賦值 2.數組解構賦值 var arr=[1,2,3]; var a=arr[1],b=arr[2],c=arr[3]; ===>es6數組解構語法 var arr=[1,2,3]; let[a,b,c]=arr; console.log(a,b,c);//1,2,3 1)數組解構解析 從數組中取值，按照對應的位置，對等號左邊的中括號裏邊的變量進行賦值，這種寫法屬於‘匹配模式’，只要等號兩邊模式相同，左邊的變量就會被賦予對應的值 2）解構失敗 若是解構失敗，那麼失敗的變量值爲undefined 若是等號左邊的模式變量數量大於右邊數組的元素數量，多出來的變量會解析失敗 eg:let[a,b,c,d,e,f]=[1,2,3];//變量d,e,f會解析失敗 3）不徹底解構 等號左邊模式中的變量數量小於右邊數組中的元素數量，有部分數組元素沒有對應的變量，叫作不徹底解構 eg:let[a,b]=[1,2,3]; 4)若是模式不一樣，會報錯（等號同右邊不是數組，報錯） 特殊狀況：字符串能夠與數組模式進行解構 eg:let[a,b,c]={a:1,b:2,c:3};//報錯 let[a,b,c,d]='hello';//不報錯 5）解構的默認值 只有當解構失敗，賦值出現undefined，默認值纔會生效，不然默認值不生效 也就是說解構賦值出現===undefined纔會觸發默認值 默認值的做用：防止出現解構失敗的狀況，影響變量使用 若是默認值是一個表達式，這個表達式將是惰性的，也就是隻有在用到的時候纔會執行表達式 6）默認值可使用其餘變量 可是被引用的變量必須已經被定義過 . eg:let[a,b,c=a]=[1,2];//1,2,1 let[a,b=c,c=a]=[1];//引用錯誤 3.對象解構 語法： let {a,b}={a:1,b:2}; console.log(a,b);//1 2 ===》 let {a:a,b:b}={a:1,b:2}; console.log(a,b);//1 2 1)解構規則： 數組解構是按照等號左右對應順序進行賦值的，可是對象解構變量的取值沒有順序，按照左邊變量的鍵和右邊對象元素的鍵，相同的進行賦值 let {a:a,b:c}//第一個a和b都是模式（鍵）用於匹配 第二個a和c都是變量用於賦值 2）若是變量名和屬性名（鍵）不同 let{a:c,b:b}={a:'aaa',b:'bbb'}; a:是解構的模式 c是變量 b是解構的模式 b是變量 c是'aaa' b='bbb' es6容許對象中鍵和值用同一個字母或單詞表示，此時能夠省略冒號以及後面的變量： var a=100; let obj={a:a}===>{a} 思路： 先找同名的屬性（冒號前面的內容），而後將對象右邊的值賦值給模式中冒號右邊的變量 3）變量同名怎麼辦 es6規定，let定義的變量不能重名，全部解構賦值也不能重複 若是變量重名，解決辦法： 在es6中，若是使用let聲明兩個相同名字的變量會報錯，可是若是第二個變量不用let聲明就不會報錯，可是編輯器會將大括號理解爲一個塊級做用域，代碼塊是不能進行運算的，全部還會報錯，此時咱們將整個解構賦值的表達式用小括號括起來，將整個賦值過程降級爲表達式，就不會被認爲是代碼塊了。此時就能夠完整執行 eg： let a=1； （{a}={a:100,b:100}）; console.log(a)//100 4.解構的嵌套 對象解構嵌套的前提是等號左右結構必須一致 5.默認值 當解構賦值===undefined，會觸發默認值 4、字符串解構 字符串解構時，會將字符串轉爲類數組， 解構方式與數組相似： 語法： let[a,b,c,d,e]='hello'; console.log(a,b,c,d,e);//h e l l o 注意：字符串解構時，會先將字符串轉爲類數組，而後再利用數組的結構方法進行解構 大部分字符串被轉爲類數組時，會產生一個屬性length，能夠將其解構出來，表示字符串長度 解構length的方法： let{length}='hello'; console.log(length);//5 5.數值與布爾值的解構賦值 一切皆對象 使用對象的解構方案，在數值和布爾值進行解構時，實際上是先將其轉爲對象，再進行解構 解構原則：若是右邊不是數組或者字符串，就會報錯 對象解構：若是有變不是對象。就會先將其轉爲對象，而後按對象解構的規則進行解構 注意：因爲null和undefined都沒法轉爲對象，全部null和undefined進行解構都會報錯 6.函數的解構賦值 語法： function f([x,y,z=3]){ //系統自動幫咱們作形參與實參的解構let[x,y,z=3]=[1,2] console.log(x+y+z); } f([1,2]);//6 function fun({a,b}){ //系統自動幫咱們作形參與實參的解構let(a,b)={a:2,b:4}; console.log(a*b); } fun({a:2,b:4});//8 函數的參數是一個數組。傳入的值也是數組，其實上就是形參與實參之間的解構賦值 能夠根據數組解構或對象解構規則使用默認值 7.解構的用途 1）交換變量值 2）函數中返回多個值 函數只有一個return。只能返回一個值，想要返回多個值。就要將多個值放入數組或對象中返回，此時可使用解構，輕鬆的將數組或對象中的返回內容接受出來 3）函數參數傳參（函數解構） 有序傳參 [] 無序傳參{} 4)設置函數參數的默認值 es6容許函數參數設置默認值 5）提取json 解構對提取json尤其有用