JS解构赋值：

数组解构：

将数组的单元值快速批量的赋值给一系列变量的简洁语法

变量的顺序对应数组单元值的位置依次进行赋值操作

 const arr = [100,60,80];
        //数组解构 赋值
        const [max,min,avg] = arr;
        //const [max,min,avg] = [100,60,80];
        // const max = arr[0];
        // const min = arr[1];
        // const avg = arr[2];

        console.log(max);
        console.log(min);
        console.log(avg);

Js 前面有两哪种情况需要加分号的？

• 立即执行函数

• 数组解构

变量多 单元值少的情况:

变量的数量大于单元值数量时，多余的变量将被赋值为 undefined

 const [a,b,c,d] = [1,2,3];
        console.log(a);//1
        console.log(b);//2
        console.log(c);//3
        console.log(d);//undefined

变量少 单元值多的情况：

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

利用剩余参数解决变量少 单元值多的情况：

const [a,b,...c] = [1,2,3,4];
        console.log(a);//1
        console.log(b);//2
        console.log(c);//Array:[3,4]真数组 剩余参数返回的还是一个数组

防止有undefined传递单元值的情况，可以设置默认值:

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

按需导入，忽略某些返回值：

const [a,,c,d] = ['小米','华为','格力','空调'];
        console.log(a);//小米
        console.log(c);//格力
        console.log(d);//空调

支持多维数组的结构:

 // const arr = [1,2,[3,4]];
        // console.log(arr[0]);//1
        // console.log(arr[1]);//2
        // console.log(arr[2]);//[3,4]
        // console.log(arr[2][0]);//3
        //支持多维数组的结构：
        // const [a,b,c] = [1,2,[3,4]];
        // console.log(a);//1
        // console.log(b);//2
        // console.log(c);//3,4

        const [a,b,[c,d]] = [1,2,[3,4]];
        console.log(a);//1
        console.log(b);//2
        console.log(c);//3
        console.log(d);//4

对象解构：

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法

1. 基本语法：

1. 赋值运算符 = 左侧的 {} 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量

2. 对象属性的值将被赋值给与属性名相同的变量

3. 注意解构的变量名不要和外面的变量名冲突否则报错

4. 对象中找不到与变量名一致的属性时变量值为 undefined

// const obj = {
        //     uname:'pink老师',
        //     age:18
        // }
        // obj.uname
        // 要求属性名和变量名一致
        //对象解构的变量名可以重新改名
        const {uname:username,age} = {
            uname:'pink老师',
            age:18
        };
        console.log(username);//pink老师
        console.log(age);//18
        //等价于 const uname = obj.uname

2.数组对象解构

//2.解构数组对象：
        const pig = [{uname:'peiqi',age:18}]
        const [{uname,age}] = pig;
        console.log(uname);//peiqi
        console.log(age);//18

3.多级对象解构：

 const pig = {
            name:'佩奇',
            family:{
                mother:'🐖妈妈',
                father:'🐖爸爸',
                sister:'乔治'
            },
            age:6
        }
        //多级对象解构
        const {name,family:{mother,father,sister},age} = pig;
        console.log(name);//佩奇
        console.log(mother);//妈妈
        console.log(father);//爸爸
        console.log(sister);//乔治
        console.log(age);//6

4.多级数组解构：

const person = [{name:'佩奇',
                 family:{
                    mother:'🐖妈妈',
                    father:'🐖爸爸',
                    sister:'乔治'
                },
                age:6
            }
        ]
        const [{name,family:{mother,father,sister},age}] = person;
        console.log(name);//佩奇
        console.log(mother);//🐖妈妈
        console.log(father);//🐖爸爸
        console.log(sister);//乔治
        console.log(age);//6

练习：

<script>
    // 1. 这是后台传递过来的数据
    const msg = {
      "code": 200,

      "msg": "获取新闻列表成功",
      "data": [
        {
          "id": 1,
          "title": "5G商用自己，三大运用商收入下降",
          "count": 58
        },
        {
          "id": 2,
          "title": "国际媒体头条速览",
          "count": 56
        },
        {
          "id": 3,
          "title": "乌克兰和俄罗斯持续冲突",
          "count": 1669
        },

      ]
    }

    // 需求1： 请将以上msg对象  采用对象解构的方式 只选出  data 方面后面使用渲染页面
    // const {data} = msg;
    // console.log(data);
    // 需求2： 上面msg是后台传递过来的数据，我们需要把data选出当做参数传递给 函数
	//因为：const {data} = arr
	//所以{data}等价于arr
	//可以直接带入{data}
    // function render({data}){
    //     console.log(data);
    // }
    // render(msg);
    // 需求3， 为了防止msg里面的data名字混淆，要求渲染函数里面的数据名改为 myData
    function render({data:myDada}){
        console.log(myDada);
    }
    render(msg);