解构赋值(es6)

一.数组的解构

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

 基本语法:

        1.赋值运算符=左侧的用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量

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

const[max,min,avg]=[100,60,80];
console.log(max);//100
console.log(avg);//80
console.log(min);//60

典型应用:交互2个变量

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

注意:js前面必须加分号情况

①立即执行函数

(function t(){})();

或者

;(function t(){})()

②数组解构

数组开头的，特别是前面有语句的一定注意加分号和前面隔开

;[b,a]=[a,b]

数组解构的几个常见类型

1.变量多，单元值少

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

 2.变量少，单元值多

const [e,f]=[1,2,3];
        console.log(e);//1
        console.log(f);//2

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

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

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

const [a=0,b=0,c=0]=[1,2];
        console.log(a);//1
        console.log(b);//2
        console.log(c);//0
        右边如果有值与之对应的话就用右边的值，如果没有的话就用左边给的默认值

5.按需导入数值 不需要的用逗号隔开忽略掉

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

 6.支持多维数组的解构

        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.赋值运算符=左侧的非用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量

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

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

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

const {uname,age}={ uname:"pink",age:18}；
 // 要求属性名和变量名必须一致才行
console.log(uname);//pink
console.log(age);//18

const uname="red";//命名有冲突时
// 对象解构的变量名 可以改名  旧变量名：新变量名
const {uname:username,age}={ uname:"pink",age:18};
console.log(username);
console.log(age);

三.数组对象的解构

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

四.多级对象解构

  const pig={
            name:'佩奇',
            family:{
                mother:'猪妈妈',
                father:'猪爸爸',
                sister:'乔治'
            },
         age:6,   
        }

//多级对象解构
        const {name,family:{mother,father,sister},age}=pig;
        console.log(name);
        console.log(father);
        console.log(mother);
        console.log(sister);
        console.log(age);