十九、前端基础之解构赋值

 let person = {

            name:'香川',

            age:22,

            // hobby:'旅行'

        }

        // 对象解构（变量名在后面而不是前面）和顺序无关系

        let {name,age,hobby} = person

        // let {name:name,age:age,hobby} = person

        let {name:name1,age:age1,hobby1} = person

        console.log(name,age,hobby); //香川 22 undefined

        console.log(name1,age1,hobby1); //香川 22 undefined

        // 数组解构 和顺序有关系

        let [a,c,b] = [1,2,3]

        console.log(a,b,c); //  1 3 2

        // 对象解构的默认值，默认值想生效：对象与之对应的属性值一定要是undefined

        let people={

            name:'香川',

            age:22,

            // hobby:undefined

            hobby:null

        }

        let {name:name2,hobby2="旅行",age:age2} = people

        console.log(name2,age2,hobby2); //香川 22 undefined

        // 默认值例子1

        var {x=3} = {}

        console.log(x); //3

        // 默认值例子2

        var {x,y=5}={x:1}

        console.log(x,y); //1 5

        // 默认值例子3

        var {x:y=5}={}

        console.log(y); //5

        // 默认值例子4

        var {x:y=5}={x:undefined}

        console.log(y); //5

        // 默认值例子5

        var {x:y=5}={x:null}

        console.log(y); //null

        // 默认值例子6

        var {x:y=3}={x:5}

        console.log(y); //5

        // 默认值例子7

        var {x:y=3}={x:undefined}

        console.log(y); //3

        // 默认值例子

        var {x=3}={x:null}

        console.log(x); //null

 

        // 字符串解构

        var {message:msg='thank you'}={}

        console.log(msg); // thank you

 

        // 语法错误：如果要将一个已经声明的变量用于解构赋值，一定要小心

        let t

        // {}出现在行首会被认为是代码块，要解决该问题则加个括号包起来

        // {t} = {t:1}

        ({ t } = { t:1 })

        console.log(t);

        // 盲区 不会报错

        // 允许等号左边不写任何变量名

        ({} = [true,false]);

        // 盲区 上一行不加;会报错 （默认会加上分号，但是如果觉得上一行和下一行能结合一起解析就不会加分号）

        ({} = '123');

        ({} = [])

        // 数组的本质是对象 对数组进行对象属性的解构

        let arr = [1,2,3]

        let {0:first,[arr.length-1]:last} = arr

        console.log(first,last);

        let p = {

            personInfo:{

                basicInfo:{

                    name:'香川',

                    age:20

                }

            }

        }

        // 嵌套解构

        let { personInfo:{basicInfo} } = p

        console.log(basicInfo);

        // 解构的实际应用，函数返回值

        function example(){

            // return [1,2,3]

            return {

                name:'香川',

                age:22

            }

        }

        // let [a1,b1,c1] = example()

        let {name3,age3}=example()