js中数组解构与对象解构

数组解构是一种在 JavaScript 中从数组中提取值并将它们分配给变量的方式。这种语法可以方便地将数组中的元素分解为单独的变量

首先数组是有序的，有索引的的数据解构。

在数组解构中分为完全解构，不完全解构，解构失败以及解构默认值

数组解构：

1.1：完全解构

代码示例：

//1.完全解构  变量个数与数据个数一致
        let [a, b, c] = arr;

         let [a1, a2] = ["hello", "wolrd"]

        console.log(a1, a2);

1.2：不完全解构

代码示例： 

        //2.不完全解构(变量个数小于数据个数)
         let [a, b] = [10, 20, 30, 40]


         console.log(a,b);

1.3：解构失败

代码示例： 

  //3.解构失败 (变量个数大于数据个数)
        let [a, b, c] = [10, 100]

        console.log(a,b,c)

1.4：解构默认值

代码示例： 

  //默认值 (取不到值的时候，默认值生效)
         let [a = 0, b = 0, c = 0, d = 0] = [10, 20, 30]


         console.log(a + b + c + d);
         console.log(a, b, c, d);


         let [a = 0, b = 0, c = 0, d = undefined] = [1, 2, undefined]

         console.log(a, b, c, d);

1.5：其他情况

代码示例： 

//4.解构缺省
         let [, , , a, , b] = [10, 20, 'true', '(*^▽^*)', 200, '难过(ಥ﹏ಥ)'];

         console.log(a);
         console.log(b);


        //其它情况
         let [, , , a] = [10, 20, ['hello', 'world'], ['小红']]
         let [a1] = a;
         let [, , , [a]] = [10, 20, ['hello', 'world'], ['小红']]

         let [[[[a]]]] = [[[[10]], ['哈哈哈']], 100, 200];//

对象解构：

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，而对象的属性没有次序。

通过属性名来进行解析

语法：

let {属性名:变量1,属性名:变量2,...}=数据源

2.1：完全解构

代码示例：

   //1.完全解构
         let { name: sName, age: sAge, attr: att } = obj;

         console.log(sName, sAge, att);

2.2：不完全解构

代码示例：

//2.不完全解构
         let {name:sName}=obj;

         console.log(sName);

2.3：解构失败

代码示例：

 //3.解构失败
         let { no: id, name: sName } = obj;

         console.log(id, sName);

         console.log('hello');
         console.log('world');
         console.log('哈哈哈');

3.4：解构默认值

代码示例：

 //4.解构默认值
        let {
            name: sName = "张三",
            age: sAge = 0,
            no:id='10001'
        } = obj;

        console.log(sName,sAge);
        console.log(id);

3.5：使用场景

代码示例：

 let rst = {
            code: 200,
            msg: "用户信息",
            data: [
                { id: 1, title: "测试账号", token: "lsajfdlasfjdaslfdjasfd89dfa7sf9dasdfasdf" }
            ]
        }

        let { code, data = [] } = rst;