JavaScript 中的嵌套解构允许我们从嵌套的对象和数组中提取数据。一个对象（或数组）可以包含另一个对象（或数组），这被称为嵌套对象（或数组）。从嵌套的对象或数组中提取数据称为嵌套解构。我们可以使用解构来提取对象或数组中的所有或部分数据。
我们可以将从嵌套数组或对象中提取的数据赋值给变量。这就是所谓的嵌套解构赋值。当使用嵌套解构来获取嵌套数组或对象中的某些值时，你必须遵循数组或对象的结构。
嵌套对象解构
本节将演示 JavaScript 中的嵌套对象解构。
语法
嵌套对象解构在 JavaScript 中的语法如下：
const {prop1, prop2: {nestedprop1, nestedprop2}} = obj;
在上述语法中，prop1 是对象的一个属性，而 prop2 属性包含一个嵌套对象，拥有 nestedprop1 和 nestedprop2 属性。
示例
在下面的例子中，car 对象包含了 brand, model, 和 info 属性。info 属性包含了嵌套对象，其中又包含了 price 和 color 属性。
我们对嵌套对象进行了解构，并打印了变量的值。
<html>
<body>
<p id = "output"> </p>
<script>
const car = {
brand: "Hyundai",
model: "Verna",
info: {
price: 1200000,
color: "white",
}
}
const { brand, model, info: { price, color } } = car;
document.getElementById("output").innerHTML =
`Brand: ${brand} <br> Model: ${model} <br> Price: ${price} <br> Color: ${color}`;
</script>
</body>
</html>
输出：
Brand: Hyundai
Model: Verna
Price: 1200000
Color: white
示例：嵌套对象解构并重命名变量
下面的代码展示了在解构嵌套对象属性的同时可以重命名变量。
我们将 brand, model, price, color 变量重命名为 company, name, cost, carColor。
<html>
<body>
<p id = "output"> </p>
<script>
const car = {
brand: "Hyundai",
model: "Verna",
info: {
price: 1200000,
color: "white",
}
}
const {brand: company, model: name, info: {price: cost, color: carColor }} = car;
document.getElementById("output").innerHTML =
`Company: ${company}, Name: ${name}, Cost: ${cost}, Color: ${carColor}`;
</script>
</body>
</html>
输出：
Company: Hyundai, Name: Verna, Cost: 1200000, Color: white
示例：嵌套对象解构并设置默认值
你可以使用赋值运算符为变量分配默认值。每当对象的特定属性未定义时，就会用默认值初始化变量。
这里，我们为每个变量重命名并设置了默认值。grades （嵌套对象）对象中没有定义 science 属性。因此，代码在输出中打印了它的默认值。
<html>
<body>
<p id = "output"> </p>
<script>
const student = {
firstName: "Sam",
lastName: "Raina",
grades: {
English: 75,
}
};
const { firstName: name = "Jay",
lastName: surname = "Shah",
grades: { English: eng = 0, Science: sci = 0 }
} = student;
document.getElementById("output").innerHTML =
`Name: ${name} <br> Surname: ${surname} <br> English: ${eng} <br> Science: ${sci}`;
</script>
</body>
</html>
输出：
Name: Sam
Surname: Raina
English: 75
Science: 0
示例：嵌套对象解构并使用剩余操作符
剩余操作符允许你将剩余的属性收集到单个对象中。
在下面的代码中，grades 对象包含四个不同的属性。我们将 Maths 属性的值存入 Maths 变量，其余属性则存入使用剩余操作符的 allGrades 变量。allGrades 是包含三个属性的对象。
<html>
<body>
<p id = "output"> </p>
<script>
const student = {
firstName: "Kunal",
lastName: "Karma",
grades: {
English: 75,
Maths: 87,
SocialScience: 90,
Science: 80,
}
};
const { firstName, lastName, grades: { Maths, ...allGrades } } = student;
document.getElementById("output").innerHTML =
`firstName: ${firstName} <br>
lastName: ${lastName} <br>
Maths: ${Maths} <br>
allGrades: ${JSON.stringify(allGrades)} <br>
`;
</script>
</body>
</html>
输出：
firstName: Kunal
lastName: Karma
Maths: 87
allGrades: {"English":75,"SocialScience":90,"Science":80}
嵌套数组解构
本节将演示 JavaScript 中的嵌套数组解构。
语法
在 JavaScript 中解构嵌套数组元素（嵌套数组解构）的语法如下：
const [a, [b, c], d] = arr;
在上述语法中，我们将嵌套数组的元素存入 b 和 c 变量。
示例
在下面的代码中，arr 数组包含一个嵌套数组。我们将嵌套数组的元素解构成 b 和 c 变量。在输出中，你可以看到 b 和 c 变量的值。
<html>
<body>
<p id = "output"> </p>
<script>
const arr = [10, [15, 20], 30];
const [a, [b, c], d] = arr;
document.getElementById("output").innerHTML =
"a = " + a + ", b = " + b + ", c = " + c + ", d = " + d;
</script>
</body>
</html>
输出：
a = 10, b = 15, c = 20, d = 30
示例：跳过嵌套数组中的元素
解构赋值允许你跳过嵌套数组中的元素。这里，arr 数组包含两个嵌套数组。在解构嵌套数组时，我们跳过了每个嵌套数组的第一个元素。
<html>
<body>
<p id = "output"> </p>
<script>
const arr = [2, [3, 4], [9, 10]];
const [a, [, b], [, c]] = arr;
document.getElementById("output").innerHTML =
"a = " + a + ", b = " + b + ", c = " + c;
</script>
</body>
</html>
输出：
a = 2, b = 4, c = 10
示例：嵌套数组解构并设置默认值
在解构嵌套数组时，你可以像解构对象一样为变量分配默认值。
这里，arr 的第一个嵌套数组 [3, 4] 包含两个元素。在解构时，我们跳过了前两个元素，并使用变量 p 获取第三个元素，但由于嵌套数组只有两个元素，因此变量 p 的值为默认值 29。
<html>
<body>
<p id = "output"> </p>
<script>
const arr = [2, [3, 4], [9, 10]];
const [, [, , p = 29], [, q]] = arr;
document.getElementById("output").innerHTML =
"p = " + p + ", q = " + q;
</script>
</body>
</html>
输出：
p = 29, q = 10
示例：嵌套数组解构并使用剩余操作符
你可以与嵌套数组解构一起使用剩余操作符。这里，变量 b 存储第一个嵌套数组的剩余元素，而变量 c 存储父数组的其余元素，包括第二个嵌套数组和最后一个数组元素。
<html>
<body>
<p id = "output"> </p>
<script>
const arr = [[6, 7, 8, 9], [10, 11, 12, 13], 14];
const [[a, ...b], ...c] = arr
document.getElementById("output").innerHTML =
"a = " + a + "<br> b = " + b + "<br> c = " + c;
</script>
</body>
</html>
输出：
a = 6
b = 7,8,9
c = 10,11,12,13,14
对象内的数组 — 嵌套解构
有时我们需要解构包含数组的对象。以下面的例子来理解这一点。
示例
在下面的例子中，numbers 对象的 num2 属性包含了一个数组。我们解构对象的属性，并在输出中打印值。
<html>
<body>
<p id = "output"> </p>
<script>
const numbers = {
num1: 10,
num2: [40, 6, 5],
}
const {num1, num2: [a, b, c]} = numbers;
document.getElementById("output").innerHTML =
"num1 = " + num1 + ", a = " + a + ", b = " + b + ", c = " + c;
</script>
</body>
</html>
输出：
num1 = 10, a = 40, b = 6, c = 5
数组内的对象 — 嵌套解构
在某些情况下，数组也可以包含对象，你需要从数组中解构出这个对象。
示例
在下面的代码中，numbers 数组包含了一个包含 p 和 q 属性的对象。
之后，我们解构数组并解构对象的属性。
<html>
<body>
<p id = "output"> </p>
<script>
const numbers = [10, { p: 20, q: 30 }]
const [a, { p, q }] = numbers;
document.getElementById("output").innerHTML =
"a = " + a + ", p = " + p + ", q = " + q;
</script>
</body>
</html>
输出：
a = 10, p = 20, q = 30