对象解构赋值与函数参数解构

392 阅读1分钟

解构赋值: 变量赋值的简写语法

(1)把对象的属性 赋值给 变量

(2)把变量的值 赋值给 对象的属性

把对象的属性 赋值给 变量

应用场景: 服务器返回的对象层级很多,通过解构简化代码

 let obj = {
            name:'张三',
            age:20,
            student:{
                sex:'男'
            }
        }

        // ES6之前
        // let name = obj.name
        // let age = obj.age
        // let sex = obj.student.sex
        // ES6解构  let { 属性名:变量名 } = 对象名
        let { name,age:a,student:{sex} } = obj
        console.log( name,a,sex )

        /* 2.把变量的值   赋值给 对象的属性
        应用场景: 后台接口post参数需要对象, 把变量的值包在对象里面发给服务器
        */
        let username = 'admin'
        let password = '123456'
        // ES6之前
        // let body = {
        //     username:username,
        //     password:password,
        //     eat:function(){}
        // }

        //ES6
        let body = {
            username,
            password,
            eat(){}
        }

        console.log(body)

函数参数解构

/* 
        (1)解构语法:
            let { 变量名 } = 对象名

        (2)函数传参本质:实参给形参赋值
        */    

        // function fn(obj){// let obj = person
        //     console.log( obj.name )
        //     console.log( obj.age )
        // }

        function fn( {name,age} ){// let {name,age} = person
            console.log( name )
            console.log( age )
        }

        let person = {
            name:'张三',
            age:20
        }

        fn(person)
        fn( {name:'李四',age:30} )