【JavaScript】32_解构对象与对象的解构

1、解构对象

数组中可以存储任意类型的数据，也可以存数组,

如果一个数组中的元素还是数组，则这个数组我们就称为是二维数组

解构对象，方便两数交换数值；可以反向赋值对象，数组

可以在解构的同时，进行声明

    <script>
        const arr = ["孙悟空", "猪八戒", "沙和尚"]

        let a,
        b,
        c
        // a = arr[0]
        // b = arr[1]
        // c = arr[2]
        ;
        [a,b,c] = arr;//解构赋值

        let [d,e,f,g] = ['唐僧','白骨精','蜘蛛精','玉兔精']//声明同时解构
        
        // ;[d,e,f,g] = [1,2,3]
        // ;[d,e,f=77,g=10] = [1,2,3]
        ;[d,e,f=43,g=g] = [1,2,3]//直接这样的话，会显得g未定义
        console.log(d,e,f,g)

        let [n1,n2,...n3] = [4,5,6,7] // 解构数组时，可以使用...来设置多余的元素

        function fn(){
            return ['二郎神','猪八戒']
        }

        let [name1,name2] = fn();
        console.log(name1,name2)

        //可以通过解构赋值来快速交换两个变量的值
        let a1 = 10
        let a2 = 20

        //以前的方法，需要一个中间值来交换两数值
        // let temp = a1
        // a1 = a2
        // a2 = temp

        ;[a1,a2] = [a2,a1]//[20,10]

        const arr2 = ['孙悟空','猪八戒']
        ;[arr2[0],arr2[1]] = [arr2[1],arr2[0]]
        console.log(arr2)

        const arr3 = [['孙悟空',18,'男'],['猪八戒',45,'男']]
        for(let stu of arr3){
            for(let v of stu){
                console.log(v)
            }
        }

        let [[name,age,gender],obj] = arr3
        console.log(name,age,gender)
        console.log(obj)
    </script>

2、对象的解构

    <script>
        const obj = {name:'孙悟空',age:18,gender:'男'}

        // let {name,age,gender} = obj // 声明变量同时解构对象

        let name,age,gender
        ;({name,age,gender} = obj)//如果不加小括号的话，会被JS认为是代码块，但是加了小括号之后还需要添加分号，防止JS误认

        let {address} = obj;//没有的属性返回undefined
        console.log(name,age,gender,address)

        let {name: a,age: b,gender: c,address: d='花果山'} = obj
        console.log(a,b,c,d)
</script>