对象解构

这是我参与11月更文挑战的第19天，活动详情查看：2021最后一次更文挑战

前言

ECMAScript 6新增了对象解构语法,可以在一条语句中使用嵌套数据实现一个或多个赋值操作。这个知识点也挺重要的，今天我们来谈一谈对象解构。

简单地说,对象解构就是使用与对象匹配的结构来实现对象属性赋值。

下面的例子展示了两段等价的代码,首先是不使用对象解构的:不使用对象解构

 let person ={ 
 name :' Matt ＇,
 age :27
 }
 let personName = person . name ,
 personAge = person . age ;

 console . log ( personName );// Matt 
 console . log ( personAge );//27

然后,是使用对象解构的: (

//使用对象解构 
1et person ={ 
 name :' Matt ＇,
 age :27
 }
 let { name : personName , age : personAge }= person ; 
 console . log ( personName );// Matt 
 console . log ( personAge );//27

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

1et person ={
 name :' Matt ＇, 
 age :27
}
 let { name , age }= person ;
 console . log ( name );// Matt 
 console . log ( age );//27

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

 let person =( 
 name :' Matt ', 
 age :27
}
 let { name , job }= person ; 
 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

2.部分解构需要注意的是,涉及多个属性的解构赋值是一个输出无关的顺序化操作。如果一个解构表达式涉及务个赋值,开始的赋值成功而后面的赋值出错,则整个解构赋值只会完成一部分:

 let person ={
 name :' Matt ', 
 age :27
}

 let personName , personBar , personAge ;
 try {
/ /personBar是 undefined ,因此会抛出错误
({ name : personName , foo :{ bar : personBar ), age : personAge )= person ):) 
catch ( e ){
 console . log ( personName , personBar , personAge ); //HMatt , undefined , undefined}

参数上下文匹配

在函数参数列表中也可以进行解构赋值。对参数的解构赋值不会影响 arguments 对象,但可以在\

函数签名中声明在函数体内使用局部变量:

 let person ={ 
 name :' Matt ＇,
 age :27 
};
 function print Person ( foo ,{ name , age ), bar ){
 console . log ( arguments ); 
 console . log ( name , age ); 
 function print Person2( foo ,{ name : per В onName , age : personAge }, bar ){
 Console . log ( arguments );
 console , log ( personName , perSonAge );
//是给事先声明的变量赋们
 print Person ('1st＇, person ,'2nd');
//['1st＇,{ name :' Matt ＇, age :27),'2nd']

//' Matt ＇,27
 print Person2('1st＇, person ,'2nd');
//['1st＇,( name :' Matt ＇, age :27},'2nd']//' Matt ',27\

以后我可能还会继续讲一讲对象解构，但是可能就是结合一些项目实例来讲解一下了，当然对象解构还有嵌套解构，这也是我后面会重点讲解的一点，这也不难，大家一些加油，卷起来！