前端基础:解构

为什么需要解构

    理由一:获取数据时,需要不断深入获取引用对象数据或数组数据
        const _allSumbit = async ()=>{
            const response = await 函数();
            console.log(response.data.name);
        }
        
     理由二:作为一些工具方法使用(后面进行逐一介绍)
           (1)交换数据
           (2)设定默认值
           (3)浅拷贝(当只有一层时是深拷贝)
           (4)解构设置别名
           

解构的类型

         1.对象解构
         2.数组解构
         

对象解构

         1.解构嵌入式数据
            let obj = {a:{b:{c:1}}}
            let {a:{b:{c}}} = obj;
            console.log(c);//1
            
         2.解构设定默认值
             let {a=1,b=2} = {a:3};
             console.log(a,b);//3,2
             
         3.解构设定别名
             let {a:c} = {a:3};
             console.log(c);//3
             
         4.浅拷贝(当只有一层时是深拷贝)
             let obj = {a:1,b:2,c:3};
             let obj1 = {...obj};
             console.log(obj1);//{a:1,b:2,c:3}
             console.log(obj === obj1);//false
             
         5.交互对象
             let obj = {a:1,b:2};
             let {b,a} = obj;
             console.log(b,a);
             
         6.一般解构
             let obj = {a:1,b:2};
             let {a,b} = obj;//此时等效默认为{a:a,b:b} = obj
             console.log(a);//1
             console.log(b);//2

数组解构

         1.解构嵌套式数据
             const student = [1,[2,3,4,{name:'zhangsan'}],5];
             let [a,[b,c,d,{name}],e] = student;
             console.log(a,b,c,d,e,name);//1,2,3,4,5,'zhangsan'
             
         2.解构设定默认值
             let student = [1,2,3];
             let [a,b,c,d=5] = student;
             console.log(a,b,c,d);//1,2,3,5
             
         3.交换数组变量
             let a = 1;
             let b = 2;
             [a,b] = [b,a];
             console.log(a);//2
             console.log(b);//1
             
          4.合并数组
             let arr = [1,2,3];
             let arr1 = [4,5,6];
             let arr2 = [...arr,...arr1];
             console.log(arr2);//[1,2,3,4,5,6]
             
          5.拆分数组
             let arr = [4,5,6];
             let [,...arr3] = arr1;
             console.log(arr3);//[5,6]
             

混合解构

         例子:
             let arr = {
                 name:'zhangsan',
                 age:{
                    six:{
                        dir:1
                    }
                 },
                 range:[0,1]
             }
             
             let {
                 name,
                 age:{six:{dir}},
                 range:[index]
             }
             
             console.log(name);//'zhangsan'
             console.log(dir);//1
             console.log(index);//0