JS-数组的解构、对象的解构

4,解构
    数组的解构
        将数组的数值,一一对应的赋值给变量
        let [变量1,变量2,变量3] = [1,2,3];
        多维数组的解构
        let [变量1,变量2,[变量3,变量4,变量5]] = [1,2,['a','b','c']];

    对象的解构
        按照定义的属性,从对象中获取数据,赋值给定义的属性
        属性就是定义的变量名称
        let {属性} = 对象
        按照定义的属性,从对象中获取数据,赋值给定义的别名
        别名是定义的变量名称
        let {属性:别名} = 对象
        多维对象解构
        let {属性:{属性:别名}} = {属性:{属性:数据}}

一.数组的解构语法

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

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;
console.log(name);

解构语法之定义其他名称
在对象obj中,找name属性,将对应的数值数据,赋值给变量别名userName
通过userName来调用使用数据
只能一次解构一个数据,不能一次性的做一一对应的赋值
let {phone:userName} = obj;
console.log(userName);

// 多级对象的解构
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:'张三'}