ES6中新增的解构语法

 

对象的解构

将对象中对应名字的值 赋值给同名的变量    

!!注意点:对象的解构必须是 变量名和对象中的属性名同名才可以解构

对象的解构的优点:"可以快速的将对象中赋值的同名变量"

需求:定义一个对象并且解构出其中的值

var obj={
            name:"张三",
            age:20,
            gender:"男"
        }

 

 不使用解构语法下,采用赋值的方式调取出对象中的参数,可以看到使用起来十分的复杂

         let name=obj.name
         let age=obj.age
         let gender=obj.gender
         console.log(name,age,gender);

 

当我们使用解构语法来提取出里面的值的时候

        //完全解构　　　　　
        let{name,age,gender}=obj
        console.log(name,age,gender);

        //部分解构  
        //{}是对象结构的语法
        let{age}=obj
        console.log(age);

        //部分解构重命名
        //将原本name改名字为myName
        let{name:myName}=obj

 

需求:单独提取出 obj 中的一个方法

let obj ={
            naem:"欧阳三",
            fn:function(){
                console.log(this.name+":听我说谢谢你");
          }}
 
            let {fn}=obj  //解构出对象中的方法
            fn() 　　　　  //使用此方法
            //此时出现了 undefined:听我说谢谢你 是因为window中预设的name此时为空,所以我们使用var来给 window.name所赋值
            var name="南宫四"  }

 

需求:结构出随机函数 Math.random并且更新名字,使得可以使用rd()就达到 Math.random()相同效果

　　　　　　let{random:rd}=Math
　　　　　　console.log(rd());

 

 

字符串解析

所使用的的语法也是[ ]

需求:"提取出快进二字"

        let str="可以快进一个月上完所有课程吗,我好急"
        //需求:"提取出快进二字"
        let[,,a,b]=str
        console.log(a,b); //快进

 

需求,倒换a与b的值

        var a =10
        var b =20

        //es5解决方法:新建变量一个C
        var c
        c=a
        a=b
        b=c
        console.log(a,b); //20,10

        //es6解决方法
        let a =10
        let b =20
        [a,b]=[b,a]
        //解析语法["元素" : "元素"]=数组["元素" : "元素"]
        console.log(a,b); //20,10

 

 

数组解构

解构语法当然也可以对数组使用

 

解构一个最基本的数组:

        数组解构的特点:按照索引 有顺序的,一个一个的赋值

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

 

逗号占位符;

        提出的需求:想要单独提取出 d=3

　　　　let[,,d]=arr
　　　　console.log(d); //3

 

复合解构:

        复制原数组的变量并且更改名称即可

　　　　let arr2=[1,2,[100,200],3]
　　　　let [h,j,[k,l],p]=arr2
　　　　console.log(h,j,k,l,p);  //1,2,100,200,3