当数组元素的值是嵌套对象时，解构赋值的方式会稍微复杂一些，但依然可以很方便地提取出所需的值。
单层嵌套对象的解构赋值
- 对于数组中包含单层嵌套对象的情况，可以先解构出外层对象，再对其属性中的嵌套对象进行进一步的解构赋值。
const arr = [
{
id: 1,
user: {
name: 'Alice',
age: 30
}
}
];
const {
id, user: {
name, age } } = arr[0];
console.log(id);
console.log(name);
console.log(age);
在上述示例中，首先通过 { id, user: { name, age } } 解构出数组 arr 中第一个元素的 id 属性值以及 user 对象中的 name 和 age 属性值，分别赋值给对应的变量 id、name 和 age。
多层嵌套对象的解构赋值
- 当嵌套对象的层次较多时，可以继续嵌套解构赋值的表达式，按照对象的层次结构逐步提取所需的值。
const data = [
{
code: 1001,
info: {
person: {
details: {
fullName: 'Bob Smith',
contact: {
email: 'bob@example.com',
phone: '1234567890'
}
}
}
}
}
];
const {
code,
info: {
person: {
details: {
fullName, contact: {
email, phone } }
}
}
} = data[0];
console.log(code);
console.log(fullName);
console.log(email);
console.log(phone);
在这个示例中，对数组 data 中的嵌套对象进行了多层解构赋值，从最外层的 code 属性开始，逐步深入到内部的 fullName、email 和 phone 等属性，将它们的值分别赋给对应的变量，实现了对多层嵌套对象的精细解构赋值。
结合数组遍历的多层嵌套对象解构赋值
- 在实际应用中，数组中往往会包含多个具有相同结构的嵌套对象元素。此时，可以结合数组的遍历方法，如
for...of循环或map()函数等，对每个元素中的嵌套对象进行解构赋值操作。
const people = [
{
id: 1,
profile: {
name: 'Charlie',
address: {
city: 'New York',
street: '5th Ave'
}
}
},
{
id: 2,
profile: {
name: 'David',
address: {
city: 'Los Angeles',
street: 'Sunset Blvd'
}
}
}
];
for (const {
id, profile: {
name, address: {
city, street } } } of people) {
console.log(`ID: ${
id}, Name: ${
name}, City: ${
city}, Street: ${
street}`);
}
在上述示例中，使用 for...of 循环遍历数组 people，在每次循环中对当前元素的嵌套对象进行解构赋值，提取出 id、name、city 和 street 等属性值，并进行打印输出，从而实现了对数组中多个具有相同结构的嵌套对象的遍历和解构赋值。
使用别名和默认值
- 在解构嵌套对象时，同样可以使用别名和默认值来满足不同的需求。
const settings = [
{
key: 'theme',
value: {
color: 'blue',
fontSize: 14,
fontWeight: 'normal'
}
},
{
key: 'layout',
value: {
width: 800,
height: 600
}
}
];
for (const {
key,
value: {
color: themeColor = 'default_color',
fontSize: size = 12,
fontWeight: weight = 'bold',
width: layoutWidth = 600,
height: layoutHeight = 400
}
} of settings) {
if (key === 'theme') {
console.log(`Theme: Color - ${
themeColor}, Font Size - ${
size}, Font Weight - ${
weight}`);
} else if (key === 'layout') {
console.log(`Layout: Width - ${
layoutWidth}, Height - ${
layoutHeight}`);
}
}
在这个示例中，使用别名将 color 属性值赋给变量 themeColor，并为其设置了默认值 default_color，同时也为其他属性设置了相应的别名和默认值。这样在解构赋值时，如果对象中不存在对应的属性或其值为 undefined，则会使用默认值，使代码更加健壮和灵活。
通过以上方法，可以灵活地对数组中包含嵌套对象的元素进行解构赋值，根据具体的需求提取出所需的值，从而使代码更加简洁、清晰，提高代码的可读性和可维护性。
