介绍
ECMAScript6新增了对象解构语法,可以在一条语句中使用嵌套数据实现一个或者多个赋值操作,
简单的说,对象解构就是使用了与对象匹配的解构来实现对象属性赋值
简单使用
下面是不使用对象解构写的代码
let person = {
name:"张三",age:21}
let personName = person.name
let personAge = person.age
console.log(personName) // 张三
console.log(personAge) // 21
再用对象解构的语法来实现一下
let person = {
name:"张三",age:21}
let {
name:PersonName,age:PersonAge} = person
console.log(PersonName,PersonAge) // 张三,21
两者实现的功能一样,但明显对象解构的方式更加方便,简洁
1. 解构源对象不存在的属性,会打印成来undefined
let person = {
name:"张三",age:21}
let {
name:PersonName,job:PersonAge} = person
console.log(PersonName,PersonAge) // undefined
2. 在解构赋值的同时可以定义默认值,这就有效解决了前面的源对象未定义该 属性的问题
let person = {
name:"张三",age:21}
let {
name:PersonName,job="WebKaiFa"} = person
console.log(PersonName,job) // 张三 WebKaiFa
3. 解构并不要求变量必须在结构表达式中声明,不过,如果给事先声明的 变量 赋值,则赋值表达式必须包含在一对括号当中
如果不加括号的的情况(报错)
let personName,personAge;
let person = {
name:"张三",age:21};
{
name:personName,age:personAge} = person;
console.log(personName,personAge);
// Uncaught SyntaxError: Unexpected token ':'
加了括号(正常输出)
let personName,personAge;
let person = {
name:"张三",age:21};
({
name:personName,age:personAge} = person)
console.log(personName,personAge); // 张三 21
4. 嵌套解构
let person = {
name:"张三",age:21,job:{
name:"WebKaiFa"
}};
let personCopy = {
};
// 解构源对象 赋值给personCopy空对象
({
name:personCopy.name,age:personCopy.age,job:personCopy.job} = person)
console.log(personCopy);
因为一个对象的引用被赋值给personCopy空对象,所以修改源对象的属性值,personCopy的值也会对应的发生改变,
5.在外层属性没有定义的情况不能使用嵌套解构,无论源对象还有目标对象都是 一样的
显示undefined
let person = {
name:"张三",age:21,job:{
name:"WebKaiFa"
}};
let personCopy = {
};
// 解构源对象 赋值给personCopy空对象
({
address:personCopy.address} = person)
console.log(personCopy); // {address: undefined}
报错:因为address在源对象上找不到该属性
let person = {
name:"张三",age:21,job:{
name:"WebKaiFa"
}};
let personCopy = {
};
// 解构源对象 赋值给personCopy空对象
({
address:{
p:personCopy.address
}} = person)
console.log(personCopy);
// 报错:Uncaught TypeError: Cannot read properties of undefined (reading 'p')
6. 参考上下文匹配
在函数参数列表中也可以进行解构赋值,对参数的解构赋值不会影响到arguments对象,但可以在函数签名中声明在函数体内使用局部变量
let person = {
name:"张三",age:21}
function PrintPerson(foo,{
name,age},bat){
console.log(arguments);
console.log(name,age) // 张三 21
}
PrintPerson('star',person,'end')
// Arguments(3) ['star', {…}, 'end', callee: (...), Symbol(Symbol.iterator): ƒ]0: "star"1: {name: '张三', age: 21}age: 21name: "张三"[[Prototype]]: Object2:
7. 总结一下
ES6对象解构语法的优点和好处有以下几点：
- 可以方便地从对象中提取属性值，不需要使用点运算符或中括号。
- 可以给变量赋予默认值，避免undefined或null的情况。
- 可以使用别名，给变量取一个与对象属性名不同的名字。
- 可以嵌套解构，从对象的深层属性中提取值。
- 可以与函数参数结合，简化函数的定义和调用。
