es6学习系列之对象的解构赋值

基础

     // 基础
        let { b, a, c } = { 
            a: 123,
            b: 125
        }
        console.log(b, a, c);//125,123,undefined

说明:这里是最基础的用法,对象解构与数组不同,数组是索引相对应但是对象是跟key相对应.虽然b写在a的前面但是还是正常取到值了,不存在的会undefined

解构重命名 后端数据一般会包在data里面,我们需要解构使用的使用有时候需要重命名

        let {data:res} = {data:"数据"}
        console.log(res); //数据

说明:这里只需要通过一个冒号进行重命名即可

解构对象内方法

   let {log} = console
   log(1111)//1111

说明:将打印对象console的log方法解构了出来,这下打印直接用log就好了

支持深层次的嵌套

 let deep = {
            P:[
                {name:"张三"},
                "9527为您服务"
            ]
        }
        let {P:[{name},y]} = deep
        log(name,y)//'张三','9527为您服务'

说明:这里的解构同时运用了数组的解构赋值和对象的,这里p并没有参与解构而只是一个媒介,name是对象的解构,y是数组的解构如果我们想要解构p可以这样写

    let deep = {
            P:[
                {name:"张三"},
                "9527为您服务"
            ]
        }
        let {P,P:[{name},y]} = deep
        log(P,name,y)//'{name:"张三"}, "9527为您服务"','张三','9527为您服务'

下面是纯对象的例子

        const objectDeep = {
            objectp: {
                internal: {
                    username: '李四',
                    age: 15
                }
            }
        }
        let { objectp,objectp:{internal},objectp:{internal:{ username, age }} } = objectDeep
        console.log(objectp, internal,username,age);//objectp: {internal: {username: '李四',age: 15 },{username: '李四',age: 15},"李四",15

说明:只需要分清楚模式也就是我个人理解的媒介和赋值的区别.

参考资料 <<阮一峰es6标准入门教程第三版>>