JavaScript 物件解構

上一頁
下一頁

物件解構

物件解構賦值是 JavaScript 表示式，允許你將物件屬性解包並賦值給單個變數。單個變數的名稱可以與物件屬性相同，也可以不同。

當物件有很多屬性而你只需要其中幾個時，物件解構是一個非常有用的特性。

語法

JavaScript 中物件解構賦值的語法如下：

const { prop1, popr2 } = obj;
        OR
const { prop1: p1, prop12: p2 } = obj; // Renaming variables
        OR
const { prop1 = default_vaule } = obj; // With Default values
        OR
const { prop1, ...prop2 } = obj; // With rest parameter

在上述語法中，'obj' 是一個物件。prop1 和 prop2 是物件屬性。它涵蓋了物件解構的不同用例。

示例：基本物件解構

在下面的示例中，watch 物件包含 brand 和 price 屬性。

我們使用物件解構將物件屬性的值儲存到單個變數中。你可以在輸出中看到 brand 和 price 變數的值，它們與物件屬性值相同。

<html>
<body>
   <p id = "output"> </p>
   <script>
      const watch = {
         brand: "Titan",
         price: 6000,
      }
      const {brand, price} = watch;
      document.getElementById("output").innerHTML += 
      "The brand of the watch is " + brand + " and the price is " + price;
   </script>
</body>
</html>

輸出

The brand of the watch is Titan and the price is 6000

示例：解構較少的屬性

下面的程式碼演示了你可以只解包所需的屬性，而保持其他屬性不變。這裡，物件共有 4 個屬性。但是我們只解包了 brand 和 price 屬性。

<html>
<body>
   <p id = "output"> </p>
   <script>
      const watch = {
         brand: "Titan",
         price: 6000,
         color: "Pink",
         dial: "Round",
      }
      const { brand, price } = watch;
      document.getElementById("output").innerHTML = 
      "The brand of the watch is " + brand + " and the price is " + price;
   </script>
</body>
</html>

輸出

The brand of the watch is Titan and the price is 6000

物件解構和變數重新命名

在 JavaScript 物件解構中，不必使用與物件屬性相同的名稱將物件屬性值儲存到變數中。

你可以編寫一個新的變數名，後跟一個冒號，然後是物件屬性名。這樣，你可以在解構物件時重新命名物件屬性。

示例

在下面的示例中，我們將 brand 屬性的值儲存在 'bd' 變數中，color 屬性儲存在 'cr' 變數中，dial 屬性儲存在 'dl' 變數中。

新變數的值與物件屬性值相同。

<html>
<body>
   <p id = "output1">brand: </p>
   <p id = "output2">color:  </p>
   <p id = "output3">dial: </p>
   <script>
      const watch = {
         brand: "Titan",
         color: "Pink",
         dial: "Round",
      }
      const { brand: bd, color: cr, dial: dl } = watch;
       
      document.getElementById("output1").innerHTML += bd;
      document.getElementById("output2").innerHTML += cr;
      document.getElementById("output3").innerHTML += dl;
   </script>
</body>
</html>

輸出

brand: Titan

color: Pink

dial: Round

物件解構和預設值

在許多情況下，物件屬性可能包含未定義的值，或者物件中不存在特定的屬性。如果屬性未定義，JavaScript 解構賦值允許你使用預設值初始化變數。

示例

在下面的程式碼中，animal 物件包含 name 和 age 屬性。

我們解構物件並嘗試從物件中獲取 name 和 color 屬性的值。這裡，color 屬性不存在於物件中，但我們已使用預設值對其進行了初始化。

輸出顯示 'yellow' 作為 color 變數的值，這是預設值。

<html>
<body>
   <p id = "output1">Animal Name: </p>
   <p id = "output2">Animal Color: </p>
   <script>
      const animal = {
         name: "Lion",
         age: 10,
      }
      const { name = "Tiger", color = "Yellow" } = animal;
      document.getElementById("output1").innerHTML += name;
      document.getElementById("output2").innerHTML += color;
   </script>
</body>
</html>

輸出

Animal Name: Lion

Animal Color: Yellow

示例

在下面的程式碼中，我們重新命名了變數並將預設值賦予變數。我們使用冒號更改變數名，使用賦值運算子賦值預設值。

<html>
<body>
   <p id = "output1">Animal Name: </p>
   <p id = "output2">Animal Color: </p>
   <script>
      const animal = {
         name: "Lion",
         age: 10,
      }
      const { name: animalName = "Tiger", color: animalColor = "Yellow" } = animal;
      document.getElementById("output1").innerHTML += animalName;
      document.getElementById("output2").innerHTML += animalColor;
   </script>
</body>
</html>

輸出

Animal Name: Lion

Animal Color: Yellow

物件解構和 rest 運算子

JavaScript rest 引數的語法是三個點 (...). 它允許你將剩餘的物件屬性收集到一個物件格式的單個變數中。讓我們透過下面的例子來理解它。

示例

在下面的程式碼中，nums 物件包含 4 個屬性。在解構時，num1 屬性的物件值儲存在 num1 變數中。使用 rest 運算子將其他剩餘屬性儲存在 'numbers' 變數中。

在輸出中，你可以看到 'numbers' 包含一個包含 nums 物件剩餘屬性的物件。

<html>
<body>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      const nums = {
         num1: 10,
         num2: 20,
         num3: 30,
         num4: 40,
      }
      const {num1, ...numbers} = nums;
      output.innerHTML += "num1: " + num1 + "<br>";
      output.innerHTML += "numbers: " + JSON.stringify(numbers);
   </script>
</body>
</html>

輸出

num1: 10
numbers: {"num2":20,"num3":30,"num4":40}

物件解構和函式引數

你可以將 JavaScript 物件作為函式引數傳遞。之後，你可以在函式定義的引數中解構物件。

示例

在下面的程式碼中，nums 物件包含多個屬性，我們將其作為 sum() 函式的引數傳遞。

在函式引數中，我們解構物件並在函式體中使用該變數。函式體返回物件屬性的總和。

<html>
<body>
   <p id = "output"> </p>
   <script>
      function sum({ num1, num2, num3, num4 }) {
         return num1 + num2 + num3 + num4;
      }
      const nums = {
         num1: 5,
         num2: 7,
         num3: 10,
         num4: 12,
      }
      const res = sum(nums);
      document.getElementById("output").innerHTML += "The sum of numbers is: " + res;

   </script>
</body>
</html>

輸出

The sum of numbers is: 34
列印頁面
上一頁
下一頁
廣告