javascript 多级解构 js的解构

JS对象解构

• 1. 什么是对象解构 ？
• 2. 基础使用

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

• 变量直接使用属性的名称
• 变量使用自定义名称

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

• 3. 嵌套解构
• 4. 函数参数列表中解构赋值

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() 把源数据结构转换为对象。这意味着在对象解构的上下文中，原始值会被当成对象。所以 null 和 undefined 不能被解构，否则会抛出错误。

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:
  在函数参数列表使用解构赋值时，传入参数时，传入对象在参数中的位置要与函数在定义时，参数列表中解构赋值的位置一致