解构对象

神么是解构

使用es6的语法规则，将一个对象或数组的某个属性提取到变量中
未使用结构的代码

        const obj = {
            name: '张三',
            age: "15",
            sex: '男',
        }
        const name = obj.name;
        const age = obj.age;
        const sex = obj.sex;
                console.log(name,age,sex)

控制台打印结果

解构的语法

解构不会对被解构的目标造成任何影响
在解构中使用默认值
同名变量结构（同名变量是指变量与其被结构的属性名一样）
{同名变量 = 默认值}
非同命属性结构
{属性名:变量名}
同名变量结构示例

        const obj = {
            name: '张三',
            age: "15",
            sex: '男',
        }
        const {name,age,sex} = obj;
        console.log(name,age,sex)

控制台打印结果

非同命属性结构

const obj = {
            name: '张三',
            age: "15",
            sex: '男',
        }
        const {name:na,age:a,sex:s} = obj;
        console.log(na,a,s)

控制台打印结果

当在对象中结构对象

        const obj = {
            name: '张三',
            age: "15",
            sex: '男',
              // 深层解构
            login:{
                id : 1,
                pasw:"awefasf",
            }
        }
        // age = 1 给age赋予默认值
        const {name,age = 1,login:{
            id,
            pasw,
        }} = obj;
        console.log(name,age,id,pasw)

当在对象中结构数组

        const obj = {
            name: '张三',
            age: "15",
            sex: '男',
            arr: [1000, 2, 3, {
                id: 1,
                login: 123465,
                pasw: 123
            }]
        }
        const {
            name,
            age,
            sex,
          //深层解构数组中的对象 
            arr: [n1, , , {
                id
            }]
        } = obj
        console.log(name, age, sex, n1, id)

控制打印效果

剩余参数

        const obj = {
            name: '张三',
            age: "15",
            sex: '男',
        }
        const {name:na,...a} = obj;
        console.log(na,a)

控制台打印效果