数组解构、对象解构、参数解构

6.6解构destruct

【1】问题：旧js中，要想使用对象中的成员，或数字中的元素，都必须带着"对象名."或"数组名[]"前缀。但是，实际开发中，对象或数组的嵌套结构可能很深。前缀就可能写很长: “对象名.子对象名.子对象名…”，非常麻烦。

【2】何时使用：如果遇到复杂的对象或数组时，都可以通过解构的方式，来减少数组或对象的嵌套结构，便于使用

【3】如何使用：分为3种

i：数组解构

​ 1).功能：从一个复杂的数组中只提取出需要的元素单独使用

​ 2).如何使用：var [变量1,变量2,...]=数组;

​ 3).结果：下标对下标，等号两边的值会按照对应下标且相同的位置自动赋给等号左边的变量

​ 变量1=数组[0],变量2=数组[1]…

​ 4).示例：

            //   年  月 日 时 分
        var arr=[2021,7,7,11,23];
        // 数组解构，是按照对应下标的方式依次取出相应的值
        // 想要获取年，月，日
        var [y,m,d]=arr;
        console.log(`现在是${y}年`);
        console.log(`现在是${m}月`);
        console.log(`现在是${d}日`);
        // console.log(`现在是${y}时`);

        // 想要获取月，日,数组中逗号前为空表示逗号前的位置的值暂时为空
        var [,m,d]=arr;
        console.log(`现在是${m}月`);
        console.log(`现在是${d}日`);

ii：对象解构

​ 1).功能：从一个大的对象中只提取出个别属性值单独使用

​ 2).如何使用：var { 属性名1:变量1, 属性名2:变量2,... }=对象（属性名用来与对象中配对，变量用来接值）

​ 3).结果：属性对属性，但是这里不是按照顺序的，可以跳着进行取值，只要变量名和属性名一样就可以取出相应的值

​ 变量1=对象.属性名1

​ 变量名2=对象.属性名2

​ 4).如果属性名和变量名相同时，在进行对象解构时，可以只写一个，这是一个名字两用，既用来做配对的属性名，又当做接值得变量名

​ var {属性名1, 属性名2, ...}=对象

​ 5).问题: 如果试图解构的属性名在=右边的对象中不存在，会怎样？

		答: 不会报错！而是=左边配对失败的属性名默认接到undefined。

​ 6).示例

        var lilei={
            sname:"li lei",
            sage:18,
            salary:15000
        }
        // 对象解构，将对象中的个别属性取出单独使用
        //     属性名 变量名
        //       配对  取值
        var {  sname: sname,salary:salary}=lilei;
        console.log(`姓名：${sname}`);
        console.log(`薪资：${salary}`);
        var {sname,sage,salary}=lilei;
        console.log(`姓名：${sname}`);
        console.log(`年龄：${sage}`);

iii：参数解构

​ 1).问题：单靠参数默认值无法解决任一一个参数不确定有没有的情况

​ 2).解决：只要发现任意一个实参值都可能没有，但是又要求实参值必须传给指定的形参，顺序不能乱，都可以使用参数解构

​ 3).如何使用：2步

​ i. 定义函数时:

 function 函数名({
   //配对儿 : 接实参值
   属性名1: 形参1, 
   属性名2: 形参2, 
   ... : ...
   }){
		函数体
   }

​ ii. 调用函数时:

  函数名({
   //配对儿
   属性名1: 实参值1, 
   属性名2: 实参值2, 
   ... : ...
   })

​ 4).简写：定义函数时，形参列表中，属性名和形参名起相同的名字时，那么只写一个名字即可

function 函数名({
     //一个名字两用
     //既配对儿
     //又接实参值
      属性名1=默认值1, 
      属性名2=默认值2, 
      ... : ...
     }){
		函数体
     }
     
//调用时:
     函数名({
     //配对儿
      属性名1: 实参值1, 
      属性名2: 实参值2, 
      ... : ...
     })

​ 5).示例

 // 参数解构    zs xc yl都是一个名字两用
        function order(
            {zs="rice",xc="sk",yl="drink"}
            ){
            console.log(`
                ===============
                您点的套餐是：
                主食：${zs}
                小吃：${xc}
                饮料：${yl}
                ===============
            `);
        }
        // 一个不换
        order({});
        // 只换主食
        order({zs:"noddles"});
        // 换主食和小吃
        order({zs:"noddle",zc:"kc"});
        // 全都换
        order({zs:"noddle",xc:"xc",yl:"kele"});
        // 只换一个小吃
        order({xc:"none"})