对象的解构赋值

“这是我参与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;//报错 
复制代码