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
数组解构与剩余参数
如果解构赋值操作符的左侧操作数中的变量少于数组元素,JavaScript 将忽略最后剩余的数组元素。
为了解决这个问题,你可以使用剩余参数。你可以在左侧操作数中写入带有剩余操作符的最后一个变量。这样,剩下的数组元素将以数组的形式存储在剩余操作符的操作数中。
示例
在下面的代码中,数组的第一个和第二个元素分别存储在 num1
和 num2
变量中。我们使用了带有 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
如果你在中间使用剩余操作符,所有剩余的数组元素都将存储在剩余操作符的操作数中,而在剩余操作符之后使用的变量将被忽略。
数组解构与默认值
有时候,数组可能包含未定义的值或者元素数量少于变量。在这种情况下,在解构 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