1. 什么是对象解构 ?

对象解构:其实就是利用 JS 解构赋值的特性,使用与对象匹配的结构来实现对象的属性赋值(即将对象的属性值提取出来)


2. 基础使用

2.1) 变量在解构表达式中声明

变量直接使用属性的名称

const person = {
	name: "Xixi",
	age: 18
}

let { name, age } = person;
console.log(name);
console.log(age);

在这里插入图片描述

  • 如果对象中不含有想获取的属性名称,在无默认值的情况下,会返回 undefined
const person = {
	name: "Xixi",
	age: 18
}
// 不带有默认值
let { job } = person;
console.log(job);
// 带有默认值
let { hobby='basketball' } = person;
console.log(hobby);

在这里插入图片描述

变量使用自定义名称

变量如果想使用自定义的名称来获取对象的属性值,则以 valName: newName 的形式来获取,其中 valName 是在对象中的属性名称,newName 是自定义的变量名称

const person = {
	name: "Xixi",
	age: 18,
	hobby: "basketball"
}
let { age: XixiAge, hobby: XixiHobby, job: XixiJob="Student" } = person;
console.log(XixiAge);
console.log(XixiHobby);
console.log(XixiJob)

在这里插入图片描述

2.2) 变量在解构表达式前声明

如果想要给事先声明的变量赋值,则赋值表达式必须包含在一对括号中

const person = {
	name: "Xixi",
	age: 18,
	hobby: "basketball"
}
let XixiAge, XixiHobby;
({ age: XixiAge, hobby: XixiHobby } = person);
console.log(XixiAge);
console.log(XixiHobby);

在这里插入图片描述

  • Notes:

解构在内部函数使用函数 ToObject() 把源数据结构转换为对象。这意味着在对象解构的上下文中,原始值会被当成对象。所以 nullundefined 不能被解构,否则会抛出错误。

3. 嵌套解构

当对象的属性也是一个对象的时候,可以使用嵌套解构来匹配嵌套的属性

const person = {
	name: "Xixi",
	age: 18,
	hobbies: {
		hobby1: "basketball",
		hobby2: "chess"
	}
}
let { hobbies: { hobby1 } } = person;
console.log(hobby1);

在这里插入图片描述
外层属性没有定义的情况下,如果没有设置默认值,不能使用嵌套解构

const person = {
	name: "Xixi",
	age: 18,
}
let { hobbies: { hobby1 } } = person;
console.log(hobby1);

在这里插入图片描述
使用默认值则可以解决这种情况:

const person = {
	name: "Xixi",
	age: 18,
}
let { hobbies: { hobby1 } = {} } = person;
console.log(hobby1);
let { jobs: { job1 } = { job1: "student" }} = person;
console.log(job1);

在这里插入图片描述

  • Notes
    如果一个表达式涉及多个赋值,开始的赋值成功,后面的赋值失败,则解构只会完成前面成功的赋值
const person = {
	name: "Xixi",
	age: 18,
	job: "student"
}
let XixiAge, XixiHobby1, XixiJob;

try {
	({ 
		age: XixiAge,
		hobbies: { hobby1: XixiHobby1 },
		job: XixiJob
	} = person);
} catch(e) {}
console.log(XixiAge);
console.log(XixiHobby1);
console.log(XixiJob);

在这里插入图片描述

4. 函数参数列表中解构赋值

在函数参数列表使用解构赋值,不会影响到 arguments 对象
通过一个例子,来看看它的使用:

const person = {
	name: "Xixi",
	age: 18,
	hobby: "basketball"
}

function sayHello({name, age, hobby}) {
	console.log(arguments);
	console.log(`My name is ${name}. I'm ${age}. My hobby is ${hobby}.`);
}
sayHello(person);

在这里插入图片描述

  • Notes:
    在函数参数列表使用解构赋值时,传入参数时,传入对象在参数中的位置要与函数在定义时,参数列表中解构赋值的位置一致
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐