JavaScript - 数组解构

数组解构

JavaScript 数组解构允许我们从数组中解包值并将它们分配给变量。之后，您可以使用变量来访问它们的值并在代码中使用它们。我们可以使用解构赋值来执行数组结构。解构赋值基本上是一个 JavaScript 表达式。

语法

JavaScript 中数组解构赋值的语法如下 –


const array = [10, 20];
const [var1, var2] = array;

在上面的语法中，“array” 是包含 10 和 20 的原始数组。解压缩数组元素时，var1 包含 10，var2 包含 20。

示例：基本数组解构

在下面的示例中，arr 数组包含 3 个数值。之后，我们使用数组解构来解包数组元素并将它们存储在 num1、num2 和 num3 变量中。


<html>
<body>
	 	<div id = "output1"> </div>
	 	<div id = "output2"> </div>
	 	<div id = "output3"> </div>
	 	<script>
		
	 	 	 const arr = [100, 500, 1000];
	 		
	 	 	 const [num1, num2, num3] = arr;
	 		
	 	 	 document.getElementById("output1").innerHTML = "num1: " + num1;
	 	 	 document.getElementById("output2").innerHTML = "num2: " + num2;
	 	 	 document.getElementById("output3").innerHTML = "num3: " + num3;
	 		
	 	</script>
</body>
</html>

输出

num1: 100
num2: 500
num3: 1000

示例：使用数组的前 N 个元素进行解包

在解构数组时，如果左操作数的变量少于数组元素，则首先，N 个数组元素将存储在变量中。

该数组在下面的代码中包含 6 个元素，但左侧有 2 个变量。因此，数组的前 2 个元素将存储在变量中，其他元素将被忽略。


<html>
<body>
	 	<div id = "output1"> </div>
	 	<div id = "output2"> </div>
	 	<script>
	 	 	 const arr = [1, 2, 3, 4, 5, 6];
	 	 	 const [num1, num2] = arr;
	 	 	 	
	 	 	 document.getElementById("output1").innerHTML = "num1: " + num1;
	 	 	 document.getElementById("output2").innerHTML = "num2: " + num2;
	 	</script>
</body>
</html>

输出

num1: 1
num2: 2

解构数组时跳过数组元素

在 JavaScript 数组解构时，您可以跳过特定的数组元素，而无需将其分配给变量。

例

在下面的代码中，arr 数组包含 6 个数字。我们跳过了第 2个和第 4 个元素。在输出中，num3 为 3，num5 为 5，因为跳过了第 2个和第 4 个元素。


<html>
<body>
	 	<div id = "output"> </div>
	 	<script>
	 	 	 const arr = [1, 2, 3, 4, 5, 6];
	 	 	 const [num1, , num3, , num5] = arr;
	 	 	 document.getElementById("output").innerHTML =	
		 			 	"num1: " + num1 + "<br>" +
	 	 	 "num3: " + num3 + "<br>" +
	 	 	 "num5: " + num5;
	 	</script>
</body>
</html>

输出

num1: 1
num3: 3
num5: 5

数组解构和 REST 运算符

如果解构赋值运算符的左操作数包含的变量少于数组元素，则 JavaScript 会忽略最后剩余的数组元素。

要解决此问题，您可以使用 rest 运算符。您可以在左侧操作数中使用 rest 运算符编写最后一个变量。因此，剩余的数组元素将以数组格式存储在 rest 运算符的操作数中。

例

在下面的代码中，数组的第一个和第二个元素存储在 num1 和 num2 变量中。我们将 rest 运算符与 num3 变量一起使用。因此，剩余的数组元素将以数组格式存储在 num3 中。


<html>
<body>
	 	<div id = "demo"> </div>
	 	<script>
	 	 	 const arr = [1, 2, 3, 4, 5, 6];
	 	 	 const [num1, num2, ...nums] = arr;
	 	 	 document.getElementById("demo").innerHTML =	
	 	 	 "num1: " + num1 + "<br>" +	
	 	 	 "num2: " + num2 + "<br>" +
	 	 	 "nums: " + nums;
	 	</script>
</body>
</html>

输出

num1: 1
num2: 2
nums: 3,4,5,6

如果在中间使用 rest 运算符，则所有剩余的数组元素将存储在 rest 运算符的操作数中，并且 rest 运算符之后使用的变量将被忽略。

数组解构和默认值

有时，数组可能包含未定义的值或比变量少的元素。在这种情况下，在解构 JavaScript 数组时，可以使用默认值初始化变量。

例

在下面的代码中，num1、num2 和 num3 分别包含 10、20 和 30 个默认值。该数组仅包含单个元素。

因此，当我们解压缩数组时，num1 变量将包含数组元素，num2 和 num3 将包含默认值。


<html>
<body>
	 	<div id = "demo"> </div>
	 	<script>
	 	 	 const arr = [1];
	 	 	 const [num1 = 10, num2 = 20, num3 = 30] = arr;
	 	 	 document.getElementById("demo").innerHTML =	
	 	 	 "num1: " + num1 + "<br>" +
	 	 	 "num2: 	" + num2 + "<br>" +
	 	 	 "num3: " + num3;
	 	</script>
</body>
</html>

输出

num1: 1
num2: 20
num3: 30

使用数组解构交换变量

您还可以使用 JavaScript 数组解构来交换两个变量的值。

例

在下面的代码中，变量 a 和 b 分别初始化为 50 和 100。之后，我们在左右操作数中以不同的顺序添加了变量 a 和 b。在输出中，您可以看到 a 和 b 的交换值。


<html>
<body>
	 	<div id = "output"> </div>
	 	<script>
	 	 	 let a = 50, b = 100;
	 	 	 document.getElementById("output").innerHTML =	
	 	 	 "Before Swapping: a = " + a + ", b = " + b + "<br>";
	 	 	 [b, a] = [a, b]
	 	 	 document.getElementById("output").innerHTML +=	
	 	 	 "After Swapping: a = " + a + ", b = " + b;
	 	</script>
</body>
</html>

输出

Before Swapping: a = 50, b = 100
After Swapping: a = 100, b = 50

从函数中解构返回的数组

在实时开发中，动态数组是从函数返回的。因此，您还可以从函数中解构返回的数组。

例

在下面的示例中，getNums（）函数返回数字数组。

我们执行 getNums（）函数并解压缩各个变量中的数组元素。


<html>
<body>
	 	<div id = "output"> </div>
	 	<script>
	 	 	 function getNums() {
	 	 	 	 	return [99, 80, 70];
	 	 	 }
	 	 	 const [num1, num2, num3] = getNums();
	 	 	 document.getElementById("output").innerHTML =	
	 	 	 "num1: " + num1 + "<br>" +
	 	 	 "num2: " + num2 + "<br>" +
	 	 	 "num3: " + num3;
	 	</script>
</body>
</html>

输出

num1: 99
num2: 80
num3: 70

打印本页