Javascript 简明教程

JavaScript - Array Destructuring

Array Destructuring

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

Syntax

在 JavaScript 中,数组解构赋值的语法如下所示 –

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

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

Example: Basic Array Destructuring

在下面的示例中,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

Example: Unpacking with initial N elements of the array

在解构数组时,如果左操作数具有比数组元素更少的变量,则首先将 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

Skipping Array Elements While Destructuring an Array

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

Example

下文中的代码中,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

Array Destructuring and Rest Operator

如果解构赋值运算符的左操作数中变量少于数组元素,则 JavaScript 将忽略剩余的最后几个数组元素。

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

Example

以下代码中,将数组的头 2 个元素分别存储在 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

Array Destructuring and Default Values

有时,数组可能包含 undefined 值或少于变量的元素。在这些情况下,在解构 JavaScript 数组时,可以用默认值初始化变量。

Example

在以下代码中,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

Swapping Variables Using Array Destructuring

你还可以使用 JavaScript 数组解构互换两个变量的值。

Example

在以下代码中,变量 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

Destructuring the Returned Array from the Function

在实时开发中,动态数组从函数返回。因此,你还可以对函数中的返回数组进行解构。

Example

在以下示例中,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