JavaScript 如何将数组元素解包成独立的变量

解压数组元素意味着将数组元素的值分配给新的变量。我们可以把每个元素都赋给独立的变量，也可以把一些元素赋给独立的变量，而对于剩余的元素，我们可以创建一个新的数组。在本教程中，我们将学习如何使用JavaScript将数组元素解包到独立的变量中。

语法

用户可以按照下面的语法将数组元素解包到独立的变量中。

let array = [element1, element2, element3, element4];
let [a, b, c, d] = array;

在上述语法中，a变量包含元素1的值，b包含元素2的值，c包含元素3的值，d变量包含元素4的值。

现在，我们来看看用JavaScript将数组元素解包成独立变量的各种例子。

例子1

在下面的例子中，我们定义了数组1，并用一些数字值对其进行了初始化。同时，我们还定义了a、b、c三个变量，将数组元素解包到其中。之后，我们使用上述语法将数组元素解压缩到独立的变量中。

在输出中，用户可以观察到a、b和c变量的初始值，以及我们将数组元素解包到这些变量后的最终值。

<html>
<body>
   <h2>Unpacking the array elements <i> to separate variables </i> using JavaScript. </h2>
   <div id = "output"> </div>
   <script>
      var output = document.getElementById('output');
      let array1 = [10, 20, 30];
      let a = 40;
      let b = 100;
      let c = 50;
      output.innerHTML += "The elements of the array1 are " + array1 + " <br/>";
      output.innerHTML += "The initial values of the a, b, and c variables are a : " + a + " b : " + b + " c : " + c + " <br>";
      [a, b, c] = array1;
      output.innerHTML += "The values of the a, b, and c variables after unpacking the array elements are a : " + a + " b : " + b + " c : " + c + " <br>";
   </script>
</body>
</html>

例2

在这个例子中，我们在声明新变量的同时，直接将数组元素解压到单独的变量中。用户可以观察到我们是如何通过直接将数组赋值给变量而不是赋值给数组变量来声明多个变量和解压数组的。

<html>
<body> 
   <h2>Unpacking the array elements <i> to separate variables </i> using JavaScript. </h2>
   <div id = "output"> </div>
   <script>
      var output = document.getElementById('output');
      let [var1, var2, var3] = ["Hi", "Hello", "Welcome"];
      output.innerHTML += "The values of the var1, var2, and var3 variables after unpacking the array elements are var1 : " + var1 + ", var2 : " + var2 + ", var3 : " + var3 + " <br>";
   </script>
</body>
</html>

例子3

在下面的例子中，当用户点击按钮时，它将调用unpackElements()函数。在unpackElements()函数中，我们解构了数组。同时，我们在将数组元素解压到独立的变量时，跳过了数组中的一些元素。

用户可以看到，我们可以通过逗号分隔来添加空间，以跳过任何数组索引中的元素。

<html>
<body>
   <h2>Skipping some array elements while unpacking them <i> into separate variables </i> using JavaScript. </h2>
   <div id = "output"> </div>
   <button onclick="unpackElements()">Unpack array elements</button>
   <script>
      var output = document.getElementById('output');
      function unpackElements() {
         let a, b, c, d;
         output.innerHTML += "The initial values of a, b, c, d variables are a : " + a + ", b : " + b + ", c : " + c + ", d : " + d + "<br/>";

         // Skipping the elements
         [a, , b, , c, , d] = [10, 20, 30, 40, 50, 60, 70, 80, 90];
         output.innerHTML += "The values of the a, b, c, and d variables after unpacking the array elements are a : " + a + ", b : " + b + ", c : " + c + ", d : " + d + "<br/>";
      }
   </script>
</body>
</html>

例四

在下面的例子中，我们将学习在解包数组元素时为变量分配默认值。我们为所有变量指定了500作为默认值。如果数组中包含的元素少于变量总数，则变量将以默认值初始化。

在下面这个例子的输出中，我们可以看到d的值是500，这就是默认值。

<html>
<body>
   <h3>Assigning the default values to the variables while unpacking array elements <i> to separate variables </i> using JavaScript </h3>
   <div id = "output"> </div>
   <button onclick="unpackElements()">Unpack array elements</button>
   <script>
      var output = document.getElementById('output');
      function unpackElements() {
         let a, b, c, d;
         output.innerHTML += "The initial values of a, b, c, d variables are a : " + a + ", b : " + b + ", c : " + c + ", d : " + d + "<br/>";

         // Skipping the elements
         [a = 500, , b = 500, , c = 500, , d = 500] = [10, 20, 30, 40, 50];
         output.innerHTML += "The values of the a, b, c, and d variables after unpacking the array elements are a : " + a + ", b : " + b + ", c : " + c + ", d : " + d + "<br/>";
      }
   </script>
</body>
</html>