对象的解构赋值的理解

最新推荐文章于 2022-03-26 17:06:17 发布

LiM .YOon A

最新推荐文章于 2022-03-26 17:06:17 发布

阅读量69

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_45716607/article/details/116168031

版权

JavaScript 对象解构赋值嵌套对象数组解构

关键词由CSDN通过智能技术生成

前端专栏收录该内容

69 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象的解构赋值</title>
</head>
<body>
    <script>
        {
           let obj = {
               name:'Jack',
               sex:'男',
               age:20,
               hobby:["游泳","画画","跳舞"]
           }

            //let {name:name,age:age} = obj;
            //console.log(name,age);  //Jack 20

            //被简化为(前提是键值对保持一致)
            let {name,age} = obj;
            console.log(name,age);  //Jack 20

            // let {sex,hobby} = obj;
            // console.log(sex,hobby); //男 ["游泳", "画画", "跳舞"]

            // 另外一种用法
            let {sex,hobby:[a,b,c]} = obj;
            console.log(a,b,c);  //5.html:33 游泳 画画 跳舞

            //对象嵌套对象
            let obj2 = {
               name:'Jack',
               sex:'男',
               age:20,
               hobby:{
                   a:1,
                   b:2,
                   c:3
               }
           }
        
            // let {hobby:{a:x, b:y, c:z}} = obj2;
            // console.log(x,y,z);
            
            // 当键名和键名一致时可以省略掉
            // let {hobby:e} = obj2;
            // console.log(e);


            //对象嵌套对象在嵌套对象
            let obj3 = {
               name:'Jack',
               sex:'男',
               age:20,
               hobby:{
                hobby:{
                    a:1,
                    b:2,
                    c:3
                   }
               }
           }
        
        let {hobby:{hobby}}=obj3;
        console.log(hobby);

        let {hobby:{hobby:h}}=obj3;
        console.log(h);

        let {hobby:{hobby:{a:x,b:y,c:z}}}=obj3
        console.log(x,y,z);
        
        }

        /*
          数组的解构赋值是按照顺序的;
          对象的解构赋值是按照键名的;
        */
    </script>
</body>
</html>