Javascript 简明教程

JavaScript - Array Destructuring

Array Destructuring

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

JavaScript Array destructuring allows us to unpack the values from array and assign them to the variables. After that, you can use the variables to access their value and use them in the code. We can perform the array structuring using the destructuring assignment. The destructuring assignment is a basically a JavaScript expression.

Syntax

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

The syntax of array destructuring assignment in JavaScript is as follows –

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

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

In the above syntax, the "array" is the original array containing 10 and 20. When you unpack the array elements, var1 contains the 10, and var2 contains the 20.

Example: Basic Array Destructuring

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

In the example below, the arr array contains 3 numeric values. After that, we used the array destructuring to unpack array elements and store them in the num1, num2, and num3 variables.

<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 个数组元素存储在变量中。

While destructuring the array, if the left operand has fewer variables than array elements, first, N array elements get stored in the variables.

下文中的数组包含 6 个元素，但在左侧有 2 个变量，所以数组的头 2 个元素将存储在变量中，其他部分将被忽略。

The array contains 6 elements in the below code, but 2 variables exist on the left side. So, the first 2 elements of the array will be stored in the variables, and others will be ignored.

<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 数组解构时，你可以跳过特定的数组元素，而无需将其分配给变量。

While JavaScript array destructuring, you can skip a particular array element without assigning it to a variable.

Example

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

In the below code, the arr array contains 6 numbers. We have skipped the 2nd and 4th elements. In the output, num3 is 3, and num5 is 5, as the 2nd and 4th elements are skipped.

<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 将忽略剩余的最后几个数组元素。

If the left operand of the destructuring assignment operator contains fewer variables than the array elements, JavaScript ignores the last remaining array elements.

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

To solve the problem, you can use the rest operator. You can write the last variable with a rest operator in the left operand. So, the remaining array elements will be stored in the operand of the rest operator in the array format.

Example

以下代码中，将数组的头 2 个元素分别存储在 num1 和 num2 变量中。我们使用了 rest 运算符和 num3 变量。因此，剩余的数组元素将按数组格式存储在 num3 中。

In the code below, the array’s first and second elements are stored in the num1 and num2 variables. We used the rest operator with the num3 variable. So, the remaining array elements will be stored in num3 in the array format.

<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 数组时，可以用默认值初始化变量。

Sometimes, an array can contain undefined values or fewer elements than the variables. In such cases, while destructuring JavaScript arrays, the variables can be initialized with the default values.

Example

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

In the below code, num1, num2, and num3 contain 10, 20, and 30 default values, respectively. The array contains only a single element.

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

So, when we unpack the array, the num1 variable will contain the array element, num2 and num3 will contain the default values.

<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 数组解构互换两个变量的值。

You can also swap two variables’ values using the JavaScript Array Destructuring.

Example

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

In the below code, variables a and b are initialized with 50 and 100, respectively. After that, we added variables a and b in a different order in the left and right operands. In the output, you can see the swapped values of the a and 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

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

In real-time development, dynamic arrays are returned from the function. So, you can also destructure the returned array from the function.

Example

在以下示例中，getNums() 函数返回数字数组。

In the example below, getNums() function returns the array of numbers.

我们执行 getNums() 函数并将数组元素解包到各个变量中。

We execute the getNums() function and unpack array elements in the individual variables.

<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