ES6中新增的解构语法

标签：ES6 obj name 解构 语法 let console log

对象的解构 将对象中对应名字的值 赋值给同名的变量     !!注意点:对象的解构必须是 变量名和对象中的属性名同名才可以解构 对象的解构的优点:"可以快速的将对象中赋值的同名变量"

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

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 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

标签：ES6,obj,name,解构,语法,let,console,log
From： https://www.cnblogs.com/Dollom/p/16787748.html