文档详情

再谈JavaScript 中的对象解构.docx

发布:2025-05-14约1.74千字共3页下载文档
文本预览下载声明

再谈JavaScript中的对象解构

const{firstName,lastName}=fullName;//解构语法

console.log(firstName);//Quintion

console.log(lastName);//Tang

正如上面的代码片段中看到的那样,在解构语法中,分解了firstName对象属性并将其分配给表达式左侧定义的变量。在上述场景中,对象的属性名称应与左侧表达式中定义的变量匹配。如果定义其他变量名称,则获取不到想要的值,如:

constfullName={

firstName:Quintion,

lastName:Tang,

const{firstName,trueName}=fullName;//解构语法

console.log(firstName);//Quintion

console.log(trueName);//undefined

由于在fullName中没有属性trueName,所以它被初始化为undefined。

如果需要把对象属性赋值给属性名不一致的变量名,可以如下代码来实现:

constfullName={

firstName:Quintion,

lastName:Tang,

const{firstName:trueName,lastName}=fullName;//解构语法

console.log(trueName);//Quintion

console.log(lastName);//Tang

默认值解构

在上面代码中有看到,对象中不存在特定属性的解构,一般会赋值为undefined,如果不希望是undefined,可以为其设置一个默认值,如下:

constfullName={

firstName:Quintion,

lastName:Tang,

const{firstName:trueName,lastName,age=18}=fullName;//解构语法

console.log(trueName);//Quintion

console.log(lastName);//Tang

console.log(age);//18

下面来看下存在age属性下的结果:

constfullName={

firstName:Quintion,

lastName:Tang,

age:30,

const{firstName:trueName,lastName,age=18}=fullName;//解构语法

console.log(trueName);//Quintion

console.log(lastName);//Tang

console.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运算符(...)将变量的其余部属性分配给了一个单独的对象。

作者:天行无忌

链接:/post/7096827697183064094

来源:稀土掘金

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

显示全部
相似文档