ECMAScript 6 新增了对象解构语法,可以在一条语句中使用嵌套数据实现一个或多个赋值操作。简单地说,对象解构就是使用与对象匹配的结构来实现对象属性赋值。


  1. // 不使用对象解构
  2. let person = {
  3. name: 'Matt',
  4. age: 27
  5. };
  6. let personName = person.name,
  7. personAge = person.age;
  8. console.log(personName); // Matt
  9. console.log(personAge); // 27
// 使用对象解构
let person = { 
 name: 'Matt', 
 age: 27 
}; 
let { name: personName, age: personAge } = person; //运用对象解构
console.log(personName); // Matt 
console.log(personAge); // 27

使用解构,可以在一个类似对象字面量的结构中,声明多个变量,同时执行多个赋值操作。如果想让变量直接使用属性的名称,那么可以使用简写语法

let person = { 
 name: 'Matt', 
 age: 27 
}; 
let { name, age } = person;   //提取person对象内的属性
console.log(name); // Matt 
console.log(age); // 27

解构赋值不一定与对象的属性匹配。赋值的时候可以忽略某些属性,而如果引用的属性不存在,则该变量的值就是 undefined:

let person = { 
 name: 'Matt', 
 age: 27 
}; 
let { name, job } = person; //对象中没有job
console.log(name); // Matt 
console.log(job); // undefined

也可以在解构赋值的同时定义默认值,这适用于前面刚提到的引用的属性不存在于源对象中的情况:

let person = { 
 name: 'Matt', 
 age: 27 
}; 
let { name, job='Software engineer' } = person; //直接在解构中定义
console.log(name); // Matt 
console.log(job); // Software engineer

对象解构
let person = { 
 name: 'Matt', 
 age: 27,
 chile:{
 age:6,
 name:"yap"
 }
}; 
let {age, ...other } = person
// other={name:"Matt",chile:{age:6,name:"yap"}}
// ... 扩展操作符继承解构对象内剩余属性

数组解构

与对象解构相同,只不过将{}换成了[]

 let [a, b, c] = [1, 2, 3];
 console.log(a)//1
 console.log(b)//2
 console.log(c)//3
//如果解构不成功,变量的值为undefined

对象简写

当对象的属性名和属性值的变量名一致时,可以进行简写操作

let person{
    name:'yc',
  age:'24',
  gender:'man',
}

let oldObj{
    person,   // person:preson{name:'yc',age:'24',gender:'man'} =>preson
  skill:500,
}