Deconstruction deconstruction assignment variable assignment → object

<!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>
Deconstruction deconstruction assignment variable assignment → object

Guess you like
