JavaScript - 嵌套解构

嵌套解构

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, // Nested properties
	 	 	 	 	 	 color: "white",
	 	 	 	 	}
	 	 	 }
	 	 	 const { brand, model, info: { price, color } } = car; // Destructuring
	 	 	 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, // Nested properties
	 	 	 	 	color: "white",
	 	 	 }
	 	}
	 	// Destructuring
	 	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

示例：嵌套对象解构和默认值

您可以使用 assignment 运算符为变量分配默认值。每当对象的特定属性未定义时，它就会使用默认值初始化变量。

在这里，我们重命名了每个变量并分配了默认值。'science' 属性未在 grades （嵌套对象）对象中定义。因此，代码会在输出中打印其默认值。

<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

示例：嵌套对象解构和 rest 运算符

rest 运算符允许您将其余属性收集到单个对象中。

在下面的代码中，grades 对象包含 4 个不同的属性。我们使用 rest 运算符将 Maths 属性的值存储在 Maths 变量中，将其他属性存储在 'allGrades' 变量中。'allGrades' 是一个包含 3 个属性的对象。

<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

示例：嵌套数组解构和默认值

您可以在解构嵌套数组时为变量（如 objects）分配默认值。

这里，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

示例：嵌套数组解构和 rest 运算符

您可以将 rest 运算符与嵌套数组解构一起使用。在这里，变量 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

<< JavaScript - 数组解构 JavaScript - 可选链接 >>