柚子快報邀請碼778899分享：前端 Es6新語法——解構(gòu)賦值

http://yzkb.51969.com/

第一章、數(shù)組的一些解構(gòu)賦值

最基本的類型：

let array = ["LO","VE","LOVE"]; //一個數(shù)組

let [a,b,c] = array; //解構(gòu)符號內(nèi)聲明三個變量，對應(yīng)array數(shù)組中的三個值

console.log(a,b,c);

自定義排序類型：

let str1 = "LO"; //三個變量

let str2 = "VE";

let str3 = "LOVE";

[str1,str2,str3] = [str2,str1,str3]; //注意這里不用使用let再次定義了

console.log(str1,str2,str3);

自動創(chuàng)建變量并賦值：

let array = ["LO","VE","LOVE","JW","SNOW"]

let [str1,str2,str3] = array; //默認(rèn)以數(shù)組的索引開始賦值

console.log(str1,str2,str3);

可忽略類型：

let array = ["LO","VE","LOVE","JW","SNOW"]

let [str1,str2,,,str3] = array; //對不想要的值空格顯示/直接','

let [ , , , , ,str6] = array; //當(dāng)超出數(shù)組長度時，會默認(rèn)賦值undefined

console.log(str1,str2,str3,str6);

以屬性的形式指定元素的序號：

let array = ["LO","VE","LOVE","JW","SNOW"]

let {0:str1,3:str2,4:str3} = array; //中括號改成花括號，

console.log(str1,str2,str3);

解構(gòu)默認(rèn)賦值：

let array = ["LO","VE","LOVE","JW","SNOW"]

let [str1 = "snow"] = [undefined];

let [str2 = "snow"] = array;

// str1 = "snow" 其中snow為默認(rèn)值，

//只有當(dāng)解構(gòu)模式有匹配結(jié)果，且匹配結(jié)果是 undefined 時，才會觸發(fā)默認(rèn)值作為返回結(jié)果,否則就是對應(yīng)的元素

console.log(str1,str2);

用擴展運算符代表剩下的所有元素：

let array = ["LO","VE","LOVE","JW","SNOW"]

let [str1, ,...str] = array;

console.log(str1,str);

第二章、對象的一些解構(gòu)賦值

對象解構(gòu)允許我們使用變量名（鍵）匹配對象的屬性（值），匹配成功，將把對象屬性（值）賦值給變量（鍵）。簡單理解：實際上就是對象的（鍵）匹配，如果對象中的鍵與解構(gòu)符號中的變量名（鍵）匹配，則將屬性（值）賦值給變量，也是一一對應(yīng)的關(guān)系。與數(shù)組的區(qū)別：數(shù)組是根據(jù)位置賦值的；而對象則是根據(jù)屬性名（鍵）賦值，根據(jù)鍵匹配對應(yīng)的值。因此在實際開發(fā)中對象根據(jù)名字匹配值是不現(xiàn)實的，從而進(jìn)行該名，在對象屬性名后面加冒號，冒號后面接上新的變量名

2.1 對象解構(gòu)的兩種方法

語法一：let關(guān)鍵字＋{變量名1}（大括號：關(guān)鍵符號，代表解構(gòu)，里面存放變量）=?{屬性名1：屬性值}（也可以是對象名）;

let obj = {

id:'1',

name: '?VE?',

age: '20',

sex: '男',

email:'480353464@qq.com'

}//對象及對象中的五個屬性

let {name, age, email} = obj //解構(gòu)變量與obj對象中的幾個屬性名一一匹配

console.log(name,age,email)

??

語法二：let關(guān)鍵字＋{變量名1：新的變量名1}（大括號：關(guān)鍵符號，代表解構(gòu)，里面存放變量）=?{屬性名1：屬性值}（也可以是對象名）;

2.2 常用類型

基本類型：2.1的兩種方法通過數(shù)組獲取相應(yīng)的屬性名：

let obj = {

id:'1',

name: '?VE?',

age: '20',

sex: '男',

email:'480353464@qq.com'

}//對象及對象中的五個屬性

let arr = ['name','age','email']

let {[arr[0]]:myName, [arr[1]]:myAge, [arr[2]]:myEmail} = obj //解構(gòu)變量與obj對象中的幾個屬性名一一匹配

console.log(myName,myAge,myEmail)

解構(gòu)默認(rèn)賦值：?

let obj = {

id:'1',

name: '?VE?',

age: '20',

sex: '男',

email:'480353464@qq.com'

}//對象及對象中的五個屬性

let {name:myName,age:myAge,email:myEmail = "444833821@qq.com",lover:myLover = "snow"} = obj

console.log(myName,myAge,myEmail,myLover)

?

?用擴展運算符代表剩下的所有元素：

let obj = {

id:'1',

name: '?VE?',

age: '20',

sex: '男',

email:'480353464@qq.com'

}//對象及對象中的五個屬性

let {name:myName,age:myAge,...restObj} = obj

console.log(myName,myAge,restObj)

?對象的嵌套賦值：

let obj = {

id:'1',

name: '?VE?',

detail:{

age: '20',

sex: '男',

contact:{

qq: '480353464',

email:'480353464@qq.com'

}

}

}//多維對象

let {detail:{contact:{qq}}} = obj // 注意嵌套到里層的變量需要添加{}

console.log(qq)

?

?例子：

let arr = [

{name: "?LO?",age:"18"},

{name: "?VE?",age:"19"},

{name: "?LOVE?",age:"20"}

]

arr.forEach((item,index)=>{

console.log('name:'+item.name+',age:'+item.age)

})

console.log("-------------------")

arr.forEach(({name,age},index)=>{

console.log('name:'+name+',age:'+age)

})

?

?夾帶數(shù)組：

let obj = {

id:'1',

name: '?VE?',

detail:{

age: '20',

sex: '男',

contact:{

qq: '480353464',

email:'480353464@qq.com'

}

},

habbit:[

"羽毛球",

{

time:"2018"

}

]

}//多維對象

let {habbit:[str,{time},add]} = obj

console.log(str,time,add)

柚子快報邀請碼778899分享：前端 Es6新語法——解構(gòu)賦值

http://yzkb.51969.com/

好文閱讀