解构赋值语法是一种 Javascript 表达式。通过解构赋值，可以将属性值从对象/数组中取出，赋值给其他变量。

语法：

        let a, b, res;
        [a, b] = [10, 20];
        console.log(a); // 10
        console.log(b); // 20

        [a, b, ...res] = [10, 20, 30, 40, 50];
        console.log(a); // 10
        console.log(b); // 20
        console.log(res); // [30, 40, 50]

        ({ a,b } = { a: 10, b: 20 });
        console.log(a); // 10
        console.log(b); // 20

描述：

对象和数组逐个对应表达式，或称对象字面量和数组字面量，提供了一种简单的定义一个特定的数据组的方法；解构赋值使用了相同的语法，不同的是在表达式左边定义了要从原变量中取出什么变量

数组或者对象都可以进行解构赋值

数组解构

变量声明并赋值时的解构

        let arr=[1,2,3,4,5]
        let [num1,num2,num3,num4,num5]=arr
        console.log(num1,num2,num3,num4,num5)//1,2,3,4,5

变量先声明后赋值的解构

        let a, b;
        [a, b] = [1, 2];
        console.log(a); // 1
        console.log(b); // 2

在一个解构表达式中可以交换两个变量的值

        let a = 111;
        let c = 999;
        [a,c]=[c,a]
        console.log(a)
        console.log(c)

数组嵌套时也可以解构

        let arr1=[1,2,[3,4],[5,6]]
        let[num1,num2,[num3,num4],[num5,num6]]=arr1
        console.log(num1,num2,num3,num4,num5,num6)//1,2,3,4,5,6
        console.log(num1,num2,num3,num5)//1,2,3,5

可以将不需要返回的值用逗号省略

        let arr=[1,2,3,4,5]
        let [,,num1,,num3]=arr
        console.log(num1,num3)  //3,5

使用剩余运算符将余下的元素全部返回在一个变量

         let arr=[1,2,3,4,5]
        let [num1,num2, ...num3]=arr
        console.log(num1,num2)//1,2
        console.log(num3)//[3,4,5]

对象解构

1.使用与目标对象里属性同名的变量可以将对象指定的属性值获取到
2.跟对象中的属性出现的顺序没有关系
3.可以不完全解构
4.可以给对象中取出来的属性值取别名
实例如下

        let yc = {
            villageHead:'慢羊羊',
            monitor:'暖羊羊',
            students:['喜羊羊','美羊羊','懒羊羊','沸羊羊']
        }

        let {students:k}=yc
        console.log(k) //['喜羊羊', '美羊羊', '懒羊羊', '沸羊羊']

        let shop = {
            status:200,
            data:{
                shopName:'解忧杂货铺',
                goodsList:[
                    {
                        name:'小麦汁'
                    },
                    {
                        name:'高粱汁'
                    },
                    {
                        name:'葡萄汁'
                    }
                ]
            },
            message:{
                text:{
                    info:'何以解忧唯有杜康'
                }
            }
        }
        let {data:{goodsList}}=shop
        console.log(goodsList)  //goodsList：整个数组
        let {data:{shopName}}=shop
        console.log(shopName) //解忧杂货铺
        let {message:{text:{info}}}=shop
        console.log(info) //何以解忧唯有杜康