對象的解構賦值

「這是我參與8月更文挑戰的第4天，活動詳情查看：8月更文挑戰」

對象的解構賦值

對象解構賦值的原理

1.模式(結構)匹配

{}={}
複製代碼

2.屬性名相同的完成賦值

const {age,username}={username:'Alex',age:18};//這是簡寫形式
        const {age:age,username:username}={username:'Alex',age:18};
         console.log(age,username);

        // 取別名
        const {age:age,username:uname}={username:'Alex',age:18};
        console.log(age,uname);
複製代碼

注意事項

1.默認值的生效條件，對象的屬性值嚴格等於undefined時，對應的默認值纔會生效

const {username='SunChun',age=0}={username:'alex',age:undefined}
        console.log(username,age);
複製代碼

2.默認值表達式

若是默認值是表達式，默認值表達式是惰性求值的

3.將一個已經聲明的變量用於解構賦值

若是將一個已經聲明的變量用於對象的解構賦值，整個賦值須要在圓括號中進行

let{x}={x:1};
         console.log(x); 
         
         let x=2;
         不添加圓括號會報錯
         ({x}={x:1});
         console.log(x);//1
複製代碼

4.能夠取到繼承的屬性

const {a=1}={};
        const {toString}={};
        console.log(toString);
        console.log(Object.prototype);
        console.log({});
複製代碼

對象解構賦值的應用

1.函數參數的解構賦值

通常狀況下，箭頭函數

const logPersonInfo = user =>console.log(user.username,user.age);
        logPersonInfo({username:'alex',age:18});
複製代碼

解構賦值

const logPersonInfo = ({age=0,username="liuyonngqi"}) =>console.log(username,age);
        logPersonInfo({username:'alex',age:18});//alex 18
        logPersonInfo({});//liuyonngqi 0
複製代碼

案例演示

// 2.複雜的嵌套
        const obj = {
            x:1,
            y:[2,3,4],
            z:{
                a:5,
                b:6
            }
        };

        // const {x,y,z}=obj;
        // console.log(x,y,z);//1 (3) [2, 3, 4] {a: 5, b: 6}

        const {
            
            y:[,yy],
            //此時的y只是用於模式匹配沒有賦值意義
            y,
            //此時的y時y:y的簡寫形式，具備賦值意義
            z,
            z:{
                a,
                b
            }
        }=obj;
        console.log(yy,y);//3 (3) [2, 3, 4]
        console.log(z,a,b);//{a: 5, b: 6} 5 6
複製代碼

其餘數據類型的解構賦值

1.字符串的解構賦值

字符串既能夠按照數組形式來解構賦值，也能夠按對象形式解構賦值

數組形式的解構賦值
    
複製代碼

const [a,b,,,c]='hello';
        console.log(a,b,c);//h e o
複製代碼

對象形式的解構賦值
    由於字符串有length屬性，全部能夠直接解構其length
    
複製代碼

const {0:a,1:b,length}='hello';
        console.log(a,b); //h e
        console.log('hello'.length);//5
        console.log(a,b,length);//h e 5
複製代碼

2.數值和布爾值的解構賦值

先將等號右邊的值轉爲對象
    
複製代碼

console.log(new Number(123));
        const {a=1,toString}=123;
        console.log(a,toString);

        const {b=2,toString}=true;
        console.log(b,toString);
複製代碼

3.undefined和null的解構賦值

因爲undefined和null沒法轉爲對象，因此對他們進行解構賦值，都會報錯

    const{toString}=undefined;//報錯
    const{toString}=null;//報錯 
複製代碼