JS中数组与对象的解构

数组的解构语法就是数组的另一种使用调用方法，可以不通过[]语法或者不通过索引下标来调用使用数组中的数据。用于将数组中的数据一一对应的赋值给变量

        const arr = ['北京','上海','广州','重庆','天津'];
        // 之前使用数组的数据，必须要通过[]语法和索引下标
        // let str1 = arr[0];
        // let str2 = arr[1];
        // let str3 = arr[2];
        // let str4 = arr[3];
        // let str5 = arr[4];

        // 将 arr 中的数据调用出来，给左侧内容进行一一对应的赋值
        let [str1,str2,str3,str4,str5] = arr;
        console.log(str1,str2,str3,str4,str5);// 输出结果为 北京 上海 广州 重庆 天津

        // 结构多层的数组，比如二维数组
        const arr2 = ['北京','上海',['a','b','c']];
        // s1对应北京，s2对应上海，s3对应['a','b','c']
        let [s1,s2,s3] = arr2
        
        // 接着把s3对应的数组['a','b','c'] 解析
        // s1对应北京，s2对应上海，[]对应['a','b','c']，s3对应a，s4对应b，s5对应c
        let [s1,s2,[s3,s4,s5]] = arr2
        console.log(s1,s2,s3,s4,s5);// 输出结果为 北京 上海 a b c

对象的解构：之前对象数据的调用通过.语法或者[]语法，配合属性来调用操作数据。现在可以使用解构语法来调用操作数据

       const obj = {
            name:'张三',
            age:18,
            sex:'男',
            addr:'北京',
            phone:123456,
        }

之前调用数据let str1 = obj.name;
解构语法将对象中属性是name的属性值调用，赋值给name变量名称。{}中定义的属性一定是对象中具有的属性，变量名称就是name也就是属性名称let {name} = obj;
可以定义其他名称，在对象obj中找name属性，将对应的数值数据赋值给变量别名userName。通过userName来调用使用数据，只能一次解构一个数据，不能一次性的做一一对应的赋值let {phone:userName} = obj;

       // 多级对象的解构
        const obj2 = {
            name1:{
                name2:'张三'
            }
        }

        // let {name1 : {name2}} = obj2;
        let {name1 : {name2:userName}} = obj2;
        console.log(userName); 
        // 只有name2解构对应张三，name1没有内容
        // console.log(name1); 
        // 如果只是 let {name1} = obj2
        // name1存储的是对象 {name2:'张三'}