变量的解构赋值→对象的解构赋值

矫情吗；* 2022-10-02 04:44 302阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>对象的解构赋值</title>
    </head>
    
    <body>
        <script>
            const Tom = {
                name: 'xyz',
                age: 21,
                family: {
                    mother: 'lzl',
                    father: 'xh',
                    brother: 'xzh'
                }
            }
    
            /*
            获取对象里面的属性值
            */
            // ES5
            const name1 = Tom.name;
            const age1 = Tom.age;
            console.log(name1);
            console.log(age1);
    
            //ES6
            const { name, age } = Tom;
            console.log(name);
            console.log(age);
    
    
    
    
    
            /*
                对象解构语法嵌套
            */
            //ES5
            const mother1 = Tom.family.mother;
            console.log(mother1);//lzl
            
            //ES6
            const {mother}=Tom.family;
            console.log(mother);//lzl
            //注意：如果你的项目里面已经通过const声明了mother,你可以像下面这么操作
            const mother2='have been used';
            //const{mother:mother2}=Tom.family;//报错：Identifier 'mother2' has already been declared
            const{mother:mother3}=Tom.family;
            console.log(mother3);//lzl
    
    
            /*
            如果我现在获取Tom对象里面sister属性值，但是里面没有
            */
            const {mother:mother4,sister}=Tom.family;
            console.log(sister);//undefined
            /*
                    遇到这种情况，你可以直接给点提示，操作如下(注意只有在sister1属性值没有情况下，
                也就undefined的情况下才会显示你给的默认值也就是我说的提示“have no sister”，如果
                sister1属性值为null、false、0都不会显示默认值“have no sister”
            */
            const {mother:mother5,sister1="have no sister"}=Tom.family;
            console.log(sister1);
    
        </script>
    </body>
    
    </html>