JavaScript - 巢狀解構

上一頁
下一頁

巢狀解構

JavaScript 中的巢狀解構允許我們從巢狀物件和陣列中提取資料。物件（或陣列）可以在其內部包含另一個物件（或陣列），稱為巢狀物件（或陣列）。解包巢狀物件或陣列稱為巢狀解構。我們可以使用解構提取物件或陣列中的全部或部分資料。

我們可以將從巢狀陣列或物件中提取的資料分配給變數。這被稱為巢狀解構賦值。當使用巢狀解構從巢狀陣列或物件中獲取某些值時，必須遵循陣列或物件的結構。

巢狀物件解構

本節將演示 JavaScript 中的巢狀物件解構。

語法

JavaScript 中巢狀物件解構的語法如下：

const {prop1, prop2: {nestedprop1, nestedprop2}} = obj;

在上述語法中，prop1 是物件的屬性，而prop2 屬性包含巢狀物件，該物件具有nestedprop1 和nestedprop2 屬性。

示例

在下面的示例中，car 物件包含 brand、model 和 info 屬性。info 屬性包含巢狀物件，其中包含 price 和 color 屬性。

我們已經解構了巢狀物件，並在輸出中列印了變數的值。

<html>
<body>
   <p id = "output"> </p>
   <script>
      const car = {
         brand: "Hyundai",
         model: "Verna",
         info: {
            price: 1200000, // Nested properties
            color: "white",
         }
      }
      const { brand, model, info: { price, color } } = car; // Destructuring
      document.getElementById("output").innerHTML = 
	   `Brand: ${brand} <br> Model: ${model} <br> Price: ${price} <br> Color: ${color}`;
   </script>
</body>
</html>

輸出

Brand: Hyundai
Model: Verna
Price: 1200000
Color: white

示例：巢狀物件解構和變數重新命名

下面的程式碼演示了在解包巢狀物件屬性時可以重新命名變數。

我們將 brand、model、price 和 color 變數重新命名為 company、name、cost 和 carColor。

<html>
<body>
<p id = "output"> </p>
<script>

   const car = {
      brand: "Hyundai",
      model: "Verna",
      info: {
         price: 1200000, // Nested properties
         color: "white",
      }
   }
   // Destructuring
   const {brand: company, model: name, info: {price: cost, color: carColor }} = car;

   document.getElementById("output").innerHTML = 
   `Company: ${company}, Name: ${name}, Cost: ${cost}, Color: ${carColor}`;
</script>
</body>
</html>

輸出

Company: Hyundai, Name: Verna, Cost: 1200000, Color: white

示例：巢狀物件解構和預設值

您可以使用賦值運算子為變數分配預設值。每當物件的特定屬性未定義時，它都會使用預設值初始化變數。

在這裡，我們重新命名了每個變數並分配了預設值。“science”屬性未在 grades（巢狀物件）物件中定義。因此，程式碼在輸出中列印其預設值。

<html>
<body>
   <p id = "output"> </p>
   <script>
      const student = {
         firstName: "Sam",
         lastName: "Raina",
         grades: {
            English: 75,
         }
      };
    
      const { firstName: name = "Jay", 
         lastName: surname = "Shah", 
         grades: { English: eng = 0, Science: sci = 0 } 
      } = student;
      
      document.getElementById("output").innerHTML = 
      `Name: ${name} <br> Surname: ${surname} <br> English: ${eng} <br> Science: ${sci}`;
   </script>
</body>
</html>

輸出

Name: Sam
Surname: Raina
English: 75
Science: 0

示例：巢狀物件解構和 rest 運算子

rest 運算子允許您將剩餘的屬性收集到單個物件中。

在下面的程式碼中，grades 物件包含 4 個不同的屬性。我們使用 rest 運算子將 Maths 屬性的值儲存在 Maths 變數中，並將其他屬性儲存在 'allGrades' 變數中。“allGrades”是一個包含 3 個屬性的物件。

<html>
<body>
   <p id = "output"> </p>
   <script>
      const student = {
         firstName: "Kunal",
         lastName: "Karma",
         grades: {
            English: 75,
            Maths: 87,
            SocialScience: 90,
            Science: 80,
         }
      };
      const { firstName, lastName, grades: { Maths, ...allGrades } } = student;
      document.getElementById("output").innerHTML = 
		`firstName: ${firstName} <br>
		 lastName: ${lastName} <br>
		 Maths: ${Maths} <br>
		 allGrades: ${JSON.stringify(allGrades)} <br>
		 `;
   </script>
</body>
</html>

輸出

firstName: Kunal
lastName: Karma
Maths: 87
allGrades: {"English":75,"SocialScience":90,"Science":80}

巢狀陣列解構

本節將演示 JavaScript 中的巢狀陣列解構。

語法

在 JavaScript 中解包巢狀陣列元素（巢狀陣列解構）的語法如下：

const [a, [b, c], d] = arr;

在上述語法中，我們將巢狀陣列元素儲存在 b 和 c 變數中。

示例

在下面的程式碼中，arr 陣列包含巢狀陣列。我們將巢狀陣列元素解包到 b 和 c 變數中。在輸出中，您可以觀察到 b 和 c 變數的值。

<html>
<body>
   <p id = "output"> </p>
   <script>
      const arr = [10, [15, 20], 30];
      const [a, [b, c], d] = arr;
      document.getElementById("output").innerHTML = 
      "a = " + a + ", b = " + b + ", c = " + c + ", d = " + d; 
   </script>
</body>
</html>

輸出

a = 10, b = 15, c = 20, d = 30

示例：跳過巢狀陣列的元素

賦值解構允許您跳過巢狀陣列的元素。這裡，arr 陣列包含兩個巢狀陣列。我們在解構巢狀陣列時跳過每個巢狀陣列的第一個元素。

<html>
<body>
   <p id = "output"> </p>
   <script>
      const arr = [2, [3, 4], [9, 10]];
      const [a, [, b], [, c]] = arr;
      document.getElementById("output").innerHTML = 
      "a = " + a + ", b = " + b + ", c = " + c; 
   </script>
</body>
</html>

輸出

a = 2, b = 4, c = 10

示例：巢狀陣列解構和預設值

解構巢狀陣列時，您可以像物件一樣為變數分配預設值。

這裡，arr [3, 4] 的第一個巢狀陣列包含兩個元素。解構時，我們跳過了前兩個元素並使用變數 p 獲取第三個元素，但巢狀陣列僅包含兩個元素。因此，變數 p 的值為 29（預設值）。

<html>
<body>
   <p id = "output"> </p>
   <script>
      const arr = [2, [3, 4], [9, 10]];
      const [, [, , p = 29], [, q]] = arr;
      document.getElementById("output").innerHTML =
      "p = " + p + ", q = " + q; 
   </script>
</body>
</html>

輸出

p = 29, q = 10

示例：巢狀陣列解構和 rest 運算子

您可以使用剩餘運算子結合巢狀陣列解構。這裡，變數b儲存第一個巢狀陣列的剩餘元素，變數c儲存父陣列的剩餘元素，其中包括第二個巢狀陣列和最後一個數組元素。

<html>
<body>
   <p id = "output"> </p>
   <script>
      const arr = [[6, 7, 8, 9], [10, 11, 12, 13], 14];
      const [[a, ...b], ...c] = arr
      document.getElementById("output").innerHTML = 
      "a = " + a + "<br> b = " + b + "<br> c = " + c; 
   </script>
</body>
</html>

輸出

a = 6
b = 7,8,9
c = 10,11,12,13,14

物件中的陣列 – 巢狀解構

有時，我們需要解構包含陣列的物件。讓我們透過下面的例子來理解它。

示例

在下面的例子中，numbers物件的num2屬性包含陣列。我們解構物件的屬性並在輸出中列印值。

<html>
<body>
   <p id = "output"> </p>
   <script>
      const numbers = {
         num1: 10,
         num2: [40, 6, 5],
      }
      const {num1, num2: [a, b, c]} = numbers;
      document.getElementById("output").innerHTML = 
      "num1 = " + num1 + ", a = " + a + ", b = " + b + ", c = " + c; 
   </script>
</body>
</html>

輸出

num1 = 10, a = 40, b = 6, c = 5

陣列中的物件 – 巢狀解構

在某些情況下，陣列也可以包含物件，您需要從陣列中解構物件。

示例

在下面的程式碼中，numbers陣列包含包含p和q屬性的物件。

之後，我們解構陣列並解包物件的屬性。

<html>
<body>
   <p id = "output"> </p>
   <script>
      const numbers = [10, { p: 20, q: 30 }]
      const [a, { p, q }] = numbers;
      document.getElementById("output").innerHTML = 
      "a = " + a + ", p = " + p + ", q = " + q; 
   </script>
</body>
</html>

輸出

a = 10, p = 20, q = 30
列印頁面
上一頁
下一頁
廣告