对象解构

对象解构

对象解构就是使用与对象匹配的结构来实现对象属性赋值

let person = {
    name:'royan',
    age:18
}
let {name:personName, age:personAge} = person
///相当于
//let personName = person.name
// let personAge = person.age
console.log(personName);
console.log(personAge);

变量与对象属性共用一个名称时，只写属性名即可

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

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

let person = {
    name:'royan',
    age:18
}
let {job} = person
console.log(job);//undefined

在解构赋值的同时定义默认值
默认值被对象属性值覆盖

let person = {
    name:'royan',
    age:18
}
let {name='eddy',hobby='eat snacks'} = person
console.log(name);//是person的name: royan
console.log(hobby);//eat snacks

解构并不要求变量必须在解构表达式中声明。
如果是给事先声明的变量赋值，则赋值表达式必须包含在一对括号( )中

let person = {
    name:'royan',
    age:18
}
let personName,personAge
({name:personName, age:personAge} = person)//括号
console.log(personName);
console.log(personAge);

嵌套解构

解构可以用于复制对象属性
因为一个对象的引用被赋值给 anotherPerson，所以修改 personA.job 对象的属性也会影响anotherPerson

let personA = { 
    name: 'royan', 
    age: 18, 
    job: { 
    title: 'manager' 
    } 
   }; 
let anotherPerson = {};
({
    name:anotherPerson.name,
    age:anotherPerson.age,
    job:anotherPerson.job
} = personA )
console.log(anotherPerson);//{ name: 'royan', age: 18, job: { title: 'manager' } }
personA.job.title = 'CEO' 
console.log(personA); 
// { name: 'royan', age: 18, job: { title: 'manager' } }
console.log(anotherPerson); 

将属性值赋值给变量

let personA = { 
    name: 'royan', 
    age: 18, 
    job: { 
    title: 'manager' 
    } 
   }; 
let { job: { title } } = personA; 
// let { job: { title  : title } } = personA; 
console.log('title is '+title);

源对象和目标对象 在外层属性没有定义的情况下不能使用嵌套解构

let personB = { 
    job: { 
    title: 'manager' 
    } 
   }; 
   let personCopy = {}; 
   // foo 在源对象上是 undefined 
//    ({ 
//     foo: { 
//     bar: personCopy.bar 
//     } 
//    } = personB); 
   // TypeError: Cannot read property 'bar' of undefined 
 
   // job 在目标对象上是 undefined 
//    ({ 
//     job: { 
//     title: personCopy.job.title 
//     } 
//    } = personB); 
   // TypeError: Cannot set property 'title' of undefined

部分解构

开始的赋值成功而后面的赋值出错，则整个解构赋值只会完成一部分

let personC = { 
    name: 'royan', 
    age: 27 
   }; 
   let personNameC, personBarC, personAgeC; 
   try { 
    // person.foo 是 undefined，因此会抛出错误
    ({name: personNameC, foo: { bar: personBarC }, age: personAgeC} = personC); 
   } catch(e) {} 
   console.log(personNameC, personBarC, personAgeC); 
   // royan, undefined, undefined 

参数匹配

对函数参数，也可以进行解构赋值
参数的解构赋值不会影响 arguments 对象

let personC = { 
    name: 'royan', 
    age: 27 
   }; 
function printPersonName(foo,{name},bar){
    console.log(arguments);
    console.log(name);
}
printPersonName('foo1',personC,'bar1')
function printPersonNameAndAge(foo,{name,age},bar){
    console.log(arguments);
    console.log(name);
}
printPersonNameAndAge('foo2',person,'bar2')
// [Arguments] {
//     '0': 'foo1',
//     '1': { name: 'royan', age: 27 },
//     '2': 'bar1'
//   }
//   Matt
//   [Arguments] {
//     '0': 'foo2',
//     '1': { name: 'royan', age: 27 },
//     '2': 'bar2'
//   }
//   royan