ES6 03数组和对象的解构

 

 要点：1.数组对象 2.对象解构

 

 一、数组解构

1.ES6提供对数组和对象的字面量提取相关数据的方法：解构操作

2.为什么用，因为json格式的普及 ，导致大量数据提取工作

3.这个提取过程在ES6的解构语法中带来极大的便利

4.数组解构赋值，两种基本写法:1.分行解构 2.单行解构

    let info=['Mr.Lee',100 ,'男']; //数组赋值
  let [name,age,gender] = info;  //数组解构赋值
 

 let info=['Mr.Lee',100,'男'],
      [name,age,gender]  =info ;//同上
 

// 单行解构，以上均可输出name值
 let [name,age,gender]=['Mr.Lee',100,'男'];
 console.log(name);

  

5.分行或单行，都可以确定必须一一完美匹配才可以正确赋值

// 数组层次也需要匹配
let [name,[age,gender]] = ['Mr.Lee',[100,'男']];
 

// 用逗号作为占位符不赋值
  let[,,gender]=['Mr.Lee',100,'男'];

  

6.变量解构时，可在数组元素中设置一个默认值

// 当gender没有赋值时，采取默认值
 let [name,age,gender='男']=['Mr.Lee',100];

  

7.还有一种...var语法，可将没有赋值的内容都赋值给这个变量

// 不定元素，将其余都赋值给other
 let [name,...other]=['Mr.Lee',100,'男'];

  

二.对象解构

1.对象的解构方法和数组大同小异，定义一个对象字面量，解构赋值

// 定义对象字面量
     let obj={
     name:'Mr.Lee',
     age:100,
    };
    let {name,age} =obj;
   console.log(name);
   console.log(age);
 

// 解构对象至变量
 let {name,age}=obj; // 或({name,age}=obj);
 

// 直接输出变量
 console.log(name);
 console.log(age);

 

2.若解构的变量名是已经存在的变量，会导致

  

     let obj={
      name:'Mr.Lee',
      age:100,
     },name='Mr.wang';  //被替代
   
 

  ({name,age}=obj);
  console.log(name);

  

3.对象变量解构也可以设置成一个默认值，在没有赋值时输出默认值；

    let obj={
         name:'Mr.Lee',
         age:100,
        };
 let {name,age,gerder='女'}=obj;
    console.log(gerder) //如果没有默认值则unidentified

 

4.如果不想要对象属性名作为解构变量，可通过键值对的方式更改变量名

 let {name:myName,age:myage}=obj;   //name将失效

  

5.在对象字面量里，还嵌套了对象，解构时也用同样的方法是解开即可；

let obj={
    name:'Mr.Lee',
    age:100,
    info:{
        id:1,
        gender:'男'
    }
}
let {info:{id,gender}}=obj;
console.log(gender);

  

6.对象的解构也支持单行的简写模式，

let {name,age}={name:'Mr.Lee',age:100};
console.log(name);