JavaScript - 陣列解構

陣列解構

JavaScript 陣列解構允許我們解包陣列中的值並將其分配給變數。之後，您可以使用這些變數訪問它們的值並在程式碼中使用它們。我們可以使用解構賦值來執行陣列結構。解構賦值基本上是一個 JavaScript 表示式。

語法

JavaScript 中陣列解構賦值的語法如下所示：

const array = [10, 20];
const [var1, var2] = 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

列印頁面