JavaScript中的对象解构方法怎么使用
这篇文章主要介绍“JavaScript中的对象解构方法怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript中的对象解构方法怎么使用”文章能帮助大家解决问题。
基础解构
constfullName={firstName:"Quintion",lastName:"Tang",};const{firstName,lastName}=fullName;//解构语法console.log(firstName);//Quintionconsole.log(lastName);//Tang
正如上面的代码片段中看到的那样,在解构语法中,分解了 firstName 对象属性并将其分配给表达式左侧定义的变量。在上述场景中,对象的属性名称应与左侧表达式中定义的变量匹配。 如果定义其他变量名称,则获取不到想要的值,如:
constfullName={firstName:"Quintion",lastName:"Tang",};const{firstName,trueName}=fullName;//解构语法console.log(firstName);//Quintionconsole.log(trueName);//undefined
由于在 fullName 中没有属性 trueName ,所以它被初始化为 undefined。
别名解构
如果需要把对象属性赋值给属性名不一致的变量名,可以如下代码来实现:
constfullName={firstName:"Quintion",lastName:"Tang",};const{firstName:trueName,lastName}=fullName;//解构语法console.log(trueName);//Quintionconsole.log(lastName);//Tang
默认值解构
在上面代码中有看到,对象中不存在特定属性的解构,一般会赋值为 undefined ,如果不希望是 undefined ,可以为其设置一个默认值,如下:
constfullName={firstName:"Quintion",lastName:"Tang",};const{firstName:trueName,lastName,age=18}=fullName;//解构语法console.log(trueName);//Quintionconsole.log(lastName);//Tangconsole.log(age);//18
下面来看下存在 age 属性下的结果:
constfullName={firstName:"Quintion",lastName:"Tang",age:30,};const{firstName:trueName,lastName,age=18}=fullName;//解构语法console.log(trueName);//Quintionconsole.log(lastName);//Tangconsole.log(age);//30
REST解构
如果想从一个对象中解构一个属性,剩下的属性结构为另一个变量,如下:
constfullName={firstName:"Quintion",lastName:"Tang",age:30,};const{age,...username}=fullName;//解构语法console.log(username);//{firstName:'Quintion',lastName:'Tang'}console.log(age);//30
在上面的代码片段中,将 username 属性分配给了一个变量,并使用了 rest 运算符 (...) 将变量的其余部属性分配给了一个单独的对象。
关于“JavaScript中的对象解构方法怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注行业资讯频道,小编每天都会为大家更新不同的知识点。