1.對(duì)象解構(gòu)
//原始獲取對(duì)象屬性時(shí)的寫(xiě)法，需要不停的聲明變量來(lái)獲取
const Asher = {
name: 'Asher Zhang',
age: 5,
family: {
mother: 'North Zhang',
father: 'Richard Zhang',
brother: 'Howard Zhang'
}
}
const name = Asher.name; //Asher Zhang
const age = Asher.age; //5
//對(duì)象結(jié)構(gòu)的寫(xiě)法，意思是先聲明變量name和age笋鄙，然后在對(duì)象Asher中尋找同名屬性堪澎，最后將屬性值賦值給變量name和age
const {name,age} = Asher; //Asher Zhang;5
//如果在此之前已經(jīng)聲明過(guò)變量name了，會(huì)報(bào)錯(cuò)
//加上()之后就可以了蛀序，因?yàn)椴患?)時(shí)夜涕，瀏覽器會(huì)將{}解析為代碼塊挟裂，而不是解構(gòu)
let name = '';
const {name,age} = Asher; //Identifier 'name' has already been declared
({name,age} = Asher); //Asher
//解構(gòu)是可以嵌套的
const {father,mother,brother} = Asher.family; //Richard Zhang,North Zhang,Howard Zhang
//嵌套中出現(xiàn)已聲明的變量再次被聲明使用蒋譬，同樣會(huì)報(bào)錯(cuò)割岛，所以...
//這里意思是先聲明一個(gè)變量f，然后找到father所對(duì)應(yīng)的值并將其賦值給f
const father = '';
const {father:f,mother,brother} = Asher.family;
console.log(f); //Richard Zhang
//獲取對(duì)象上并沒(méi)有的屬性會(huì)返回undefined
const {father,mother,brother,sister} = Asher.family;
console.log(sister); //undefined
//可以給沒(méi)有的屬性加上默認(rèn)值
const {father,mother,brother,sister = 'have no sister'} = Asher.family;
console.log(sister); //have no sister
//默認(rèn)值只在該屬性真的沒(méi)有值的或值為undefined的時(shí)候才會(huì)返回
const Asher = {
name: 'Asher Zhang',
age: 5,
family: {
mother: 'North Zhang',
father: 'Richard Zhang',
brother: 'Howard Zhang',
sister: null
}
}
const {father,mother,brother,sister = 'have no sister'} = Asher.family;
console.log(sister); //null
2.數(shù)組解構(gòu)
const fruits = ['apple','coconut','mango','durian'];
//原始獲取數(shù)組項(xiàng)的寫(xiě)法
const durian = fruits[3]; //durian
//數(shù)組解構(gòu)寫(xiě)法犯助，和對(duì)象解構(gòu)類(lèi)似
const [apple,coconut] = fruits;
console.log(apple,coconut); //apple coconut
//獲取間隔位置的值
const [,coconut,,durian] = fruits;
console.log(coconut,durian); //coconut durian
//獲取數(shù)組第一項(xiàng)已經(jīng)其他項(xiàng)癣漆，其他項(xiàng)會(huì)新生成一個(gè)數(shù)組
const [apple,...others] = fruits;
console.log(apple); //apple
console.log(others); //["coconut", "mango", "durian"]
//rest參數(shù)只能作為 最后一個(gè)參數(shù)使用
const [apple,...others,durian] = fruits; //Rest element must be last element
//同對(duì)象，獲取數(shù)組中沒(méi)有的值返回undefined
const cont = ['Asher','jianshu.com'];
const [name,website,lan] = cont;
console.log(name,website,lan); //Asher jianshu.com undefined
//同對(duì)象剂买，一樣可以給沒(méi)有的項(xiàng)加默認(rèn)值
const [name,website,lan = 'PHP'] = cont;
console.log(name,website,lan); //Asher jianshu.com undefined
//undefined只在數(shù)組項(xiàng)沒(méi)有內(nèi)容的時(shí)候可用
const cont = ['Asher','jianshu.com',null];
const [name,website,lan = 'PHP'] = cont;
console.log(name,website,lan); //Asher jianshu.com null
//應(yīng)用場(chǎng)景：利用數(shù)組解構(gòu)交換變量值
let a = 100;
let b = 20;
[a,b] = [b,a]
console.log(a,b); //20 100
