1.對(duì)象解構(gòu)

//原始獲取對(duì)象屬性時(shí)的寫法，需要不停的聲明變量來獲取
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)的寫法，意思是先聲明變量name和age，然后在對(duì)象Asher中尋找同名屬性，最后將屬性值賦值給變量name和age
const {name,age} = Asher;    //Asher Zhang;5

//如果在此之前已經(jīng)聲明過變量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ì)象上并沒有的屬性會(huì)返回undefined
const {father,mother,brother,sister} = Asher.family;
console.log(sister);          //undefined

//可以給沒有的屬性加上默認(rèn)值
const {father,mother,brother,sister = 'have no sister'} = Asher.family;
console.log(sister);             //have no sister

//默認(rèn)值只在該屬性真的沒有值的或值為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)的寫法
const durian = fruits[3];      //durian

//數(shù)組解構(gòu)寫法，和對(duì)象解構(gòu)類似
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ù)組中沒有的值返回undefined
const cont = ['Asher','jianshu.com'];

const [name,website,lan] = cont;
console.log(name,website,lan);     //Asher jianshu.com undefined

//同對(duì)象，一樣可以給沒有的項(xiàng)加默認(rèn)值
const [name,website,lan = 'PHP'] = cont;
console.log(name,website,lan);     //Asher jianshu.com undefined

//undefined只在數(shù)組項(xiàng)沒有內(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