JavaScript - 数组的解构和对象的解构

定义：从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

一、数组的解构

数组：

        const arr = [1 , 2 , 3] ;

1.1解构所有值

常规数组值的获取是通过索引：

        const a = arr[0] ;
        const b = arr[1] ;
        const c = arr[2] ;
        console.log(a,b,c);   //输出 1 2 3

通过数组解构进行:

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

通过数组解构获取二维数组中的值

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

通过数组解构获取二维数组中具体某个数的值

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

通过数组的解构交换两个变量的值

        //交换两个变量的值
        let a = 2 ;
        let b = 1 ;
        
        //把等号右边的值给左边
        [a , b] = [b , a] ;
        console.log(a , b);  // 1 2

二、对象的解构

数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

对象：

        const obj = {
            name : 'yy' ,
            age : 18 ,
            say : function () {
                console.log(this.name);
            }
        }

对象的访问：
点语法 ------ 具体的属性名 ------ 不能解析变量
[ ] 语法 ------ 通用

         const a = 'age' ;
         console.log(obj.age);   //18
         console.log(obj['age']);  //18
         console.log(obj[a]);   //18

常规方式获取对象

        const a = 'yy' ;
        const b = 18 ;
        const c = '100kg' ;
        const fn = function () {
            console.log(obj.name);
        }

       console.log(a);   //输出：yy

解构获取所有值

        const {name : a , age : b  , say : fn} = obj ;
        console.log(a , b , fn);

给对象添加属性和属性值

        obj.weight = '1000kg' ;
        console.log(obj);

简写 ：属性名和属性值是一样的

        const a1 = 1 ;
        const a2 = 2 ;
        const a3 = 3 ;
        const obj2 = {
            a1 ,
            a2 ,
            a3 
        }
        console.log(obj2);  // {a1: 1, a2: 2, a3: 3}

• 对象的遍历使用 for in

        for(let key in obj){
            console.log(key , obj[key]);
        }