一部蛇、變量解構(gòu)
????1.什么是解構(gòu)
????????es6允許按照一定的模式,從數(shù)組和對象中提取值,對變量進(jìn)行賦值,這被稱為解構(gòu)(Destructuring)
????2.數(shù)組解構(gòu)賦值
????????語法:
????????????let[a,b,c] = [1,2,3];
????????????console.log(a,b,c);
????????????1)從數(shù)組中取值,按照對應(yīng)位置,對應(yīng)變量賦值,這種寫法屬于"匹配模式",只要等號兩邊模式相同,左邊的變量就會被賦予相對應(yīng)的值
????????????2)如果解構(gòu)失敗,變量的值就等于undefined
????????????3)不完全解構(gòu):等號左邊的模式只匹配一部分右邊的數(shù)組,解構(gòu)依然成功
????????????4)如果等號右邊不是數(shù)組:會報(bào)錯(cuò)
????????????5)解構(gòu)賦值允許默認(rèn)值:只有解構(gòu)失敗也就是變量嚴(yán)格等(===)??undefined,默認(rèn)值才會生效
????????????6)如果默認(rèn)值是一個(gè)表達(dá)式,那么這個(gè)表達(dá)式是惰性求值,即只有在用到時(shí)才能執(zhí)行
????????????7)默認(rèn)值可以引用解構(gòu)賦值的其他變量,但是被引用的變量必須已經(jīng)被定義
????3.對象解構(gòu)賦值
????????語法:
?????????????let{a,b} = {a:"aa",b:"bb"};
?????????????console.log(a,b);//aa bb
????????順序:
????????????數(shù)據(jù)解構(gòu)按照對應(yīng)位置關(guān)系,但是對象解構(gòu)變量取值沒有順序,變量必須與屬性同名,才能解構(gòu)成功
????????????變量與屬性不同名:
??????????????????let{a:c} = {a:'aaa',b:"bbb"};
??????????????????console.log(c);//aaa
????????????機(jī)制:先找到同名屬性,然后再賦值給對應(yīng)的變量,真正被賦值的是后者,而不是前者
????????????變量同名:報(bào)錯(cuò)
????????????es6規(guī)定了let和const命令定義的變量不能重復(fù)定義,結(jié)構(gòu)賦值也是一樣的
????????????如果沒有第二個(gè)let命令就不會報(bào)重復(fù)定義的錯(cuò)誤,但是編譯器會將左邊的大括號理解為一個(gè)代碼塊,代碼塊是不能被賦值的,解決辦法:將整個(gè)表達(dá)式放進(jìn)小括號中,降級為一個(gè)表達(dá)式,就不會被認(rèn)為是代碼塊了
????????????嵌套:對象解構(gòu)也可以嵌套
????????????????前提:兩邊的模式一定要一樣
????????????嵌套賦值
????????????????對象解構(gòu)默認(rèn)值
????????????????默認(rèn)值生效的條件是:對象的屬性嚴(yán)格等undefined
????4.字符串的解構(gòu)賦值
????????字符串在解構(gòu)時(shí),會將字符串轉(zhuǎn)換為一個(gè)類數(shù)組
????????語法:
???????????let[a,b,c,d] = 'hello';
???????????console.log(a,b,c,d);// h e l l
????????在字符串轉(zhuǎn)換的類數(shù)組中有一個(gè)屬性叫做length,可以對這個(gè)屬性進(jìn)行解構(gòu)賦值
????5.數(shù)值和布爾值的解構(gòu)賦值
????????使用對象解構(gòu)方案
????????如果等號右邊是數(shù)值或布爾,左邊是對象,那么數(shù)值或布爾會先被轉(zhuǎn)為對象,再解構(gòu)
????????解構(gòu)的原則:數(shù)組解構(gòu)只要右邊不是數(shù)組或者字符串,就會報(bào)錯(cuò)
??????????????????對象解構(gòu)右邊不是對象就會先轉(zhuǎn)為對象,然后解構(gòu)
??????????????????由于null和undefined無法轉(zhuǎn)為對象,所以對他們進(jìn)行的解構(gòu)都會報(bào)錯(cuò)
????6.函數(shù)的解構(gòu)賦值
?????????語法:
????????????function fun([x,y]) {
????????????????console.log(x+y);//3
????????????}
????????????fun([1,2]);//實(shí)參
????????解析語法:fun函數(shù)的參數(shù)是一個(gè)數(shù)組,調(diào)用fun傳入的也是一個(gè)數(shù)組,在傳入的瞬間,實(shí)參與形參進(jìn)行了解構(gòu),將x和y兩個(gè)變量進(jìn)行了賦值
????????????函數(shù)的解構(gòu)可以使用默認(rèn)值
????????????函數(shù)參數(shù)是一個(gè)對象,通過對象解構(gòu),得到x,y的值,如果解構(gòu)失敗就用默認(rèn)值
????7.解構(gòu)的用途
????????1)交換變量的值
????????2)從函數(shù)返回多個(gè)值
????????????函數(shù)一次只能返回一個(gè)值,想要返回多個(gè)值,只能將返回值放入數(shù)組或?qū)ο蠓祷?有的解構(gòu)方法就可以輕松的取出這些值
????????3)函數(shù)傳參
????????4)提取json數(shù)據(jù)
????????????解構(gòu)對提取json尤其有用
????????5)函數(shù)參數(shù)默認(rèn)值
???????????es6允許函數(shù)的參數(shù)設(shè)置默認(rèn)值
二模她、函數(shù)擴(kuò)展
????1.函數(shù)參數(shù)默認(rèn)值????
?????????直接將默認(rèn)值寫在形參之后
?????????function fun(x,y='world') {
????????????console.log(x,y);
???????????}
????????與解構(gòu)配合使用
?????????function fun({x,y=5} ={}) {
????????????console.log(x,y);
??????????}
??????????參數(shù)默認(rèn)值的位置:
????????????如果函數(shù)定義默認(rèn)值,這個(gè)默認(rèn)值一般會是尾參數(shù)(最后一個(gè)參數(shù)),如果非尾參數(shù)設(shè)置了默認(rèn)值,事實(shí)上這個(gè)參數(shù)是無法省略的
??????????函數(shù)參數(shù)的個(gè)數(shù):
?????????????函數(shù)的length屬性
?????????????函數(shù)名.length??是函數(shù)形參個(gè)數(shù)
?????????????函數(shù)形參個(gè)數(shù)不包含默認(rèn)值的參數(shù),以及默認(rèn)值后邊的形參都不被包含,rest參數(shù)也不包含在length之中
