对象解构"/>
对象解构
对象解构
对象解构就是使用与对象匹配的结构来实现对象属性赋值
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
更多推荐
对象解构
发布评论