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 个数字。我们跳过了第 2nd 和第 4th 个元素。在输出中，num3 是 3，num5 是 5，因为第 2nd 和第 4th 个元素被跳过了。
<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 变量中。我们在 num3 变量上使用了 rest 操作符。因此，剩余的数组元素将以数组格式存储在 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 操作符之后的变量将被忽略。
数组解构与默认值
有时，数组可能包含 undefined 值或元素数量少于变量。在这种情况下，在解构 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