对象的解构赋值

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