首頁 > 文章 > web前端 > 在 JavaScript 解構物件時如何設定預設值？

在 JavaScript 解構物件時如何設定預設值？

WBOY轉載: 2023-09-01 18:09:061054瀏覽

在 JavaScript 中解构对象时如何设置默认值？

陣列和物件解構功能是在JavaScript的ES6版本中引入的。數組和物件的解構允許我們將其值儲存在單獨的變數中。之後，我們可以使用該變數來存取物件的特定屬性的值。

在解構陣列物件時我們需要關注的主要問題是預設值。例如，我們在解構物件中加入了property3變量，但是如果該物件不包含property3，則解構會將未定義的值設為property3變數。

使用者可以按照下面的範例來了解解構如何將未定義的值設定為不存在的屬性。

範例

在下面的範例中，我們建立了 demo_obj 對象，其中包含帶有一些整數值的 x 和 y 屬性。之後，我們解構 demo_obj 並嘗試在 w、x、y 和 z 變數中設定其屬性值。

在輸出中，我們可以觀察到 w 和 z 變數的值未定義，因為它不存在於 demo_obj 物件中。

<html>
<body>
   <h2>Destructuring objects without default values in JavaScript</h2>
   <div id = "output"> </div>
</body>
<script>
   let output = document.getElementById('output');
   let demo_obj = {
      x: 30,
      y: 60
   }
   const { w, x, y, z } = demo_obj;
   output.innerHTML += "The value of w variable is " + w + "<br/>";
   output.innerHTML += "The value of x variable is " + x + "<br/>";
   output.innerHTML += "The value of y variable is " + y + "<br/>";
   output.innerHTML += "The value of z variable is " + z + "<br/>";
</script>
</html>

從上面的例子中，使用者明白了為什麼我們需要在解構物件時為變數設定預設值。

文法

使用者在 JavaScript 中解構物件時可以依照下列語法設定預設值。

const { prop1, prop2 = default_value, prop3 = default_value } = {
   prop1 : value1,
   prop2 : value2
};

在上面的語法中，我們解構了 prop1、prop2 和 porp3 變數中的物件。此外，我們也設定了 prop2 和 prop3 變數的預設值。

範例

在下面的範例中，我們建立了包含 ID、姓名和薪水的員工物件。之後，我們在 id、name、salary 和age 變數中解構僱員物件。此外，我們還使用預設值 22 初始化了年齡變數。

在輸出中，我們可以觀察到age變數的值為22，這是預設值，因為employee物件不包含age屬性。

<html>
<body>
   <h2>Destructuring objects <i> with default values </i> in JavaScript.</h2>
   <div id = "output"> </div>
</body>
<script>
   let output = document.getElementById('output');
   let employee = {
      id: "12345",
      name: "Shubham",
      salary: "10000$",
   }
   const { id, name, salary, age = 22 } = employee;
   output.innerHTML += "The value of id variable is " + id + "<br/>";
   output.innerHTML += "The value of name variable is " + name + "<br/>";
   output.innerHTML += "The value of salary variable is " + salary + "<br/>";
   output.innerHTML += "The value of age variable is " + age + "<br/>";
</script>
</html>

範例

在下面的範例中，我們建立了表格物件並將其解構為 id、drawer、width 和 color 變數。使用者可以觀察到，由於表格物件不包含 width 屬性，因此 width 變數的值為 4 英尺，這是預設值。

對於其他變量，它從物件屬性中取得值。例如，顏色變數的預設值為黑色。儘管如此，由於該物件包含具有綠色值的顏色屬性，因此將綠色指定為顏色變數的值。

<html>
<body>
   <h2>Destructuring objects <i> with default values </i> in JavaScript</h2>
   <div id= "output"> </div>
</body>
<script>
   let output = document.getElementById('output');
   let table = {
      id: "table2",
      color: "blue",
      drawers: 3,
   }
   const { id, color = "black", drawers = 5, width = "4 feet" } = table; 
   output.innerHTML += "The value of id variable is " + id + "<br/>";
   output.innerHTML += "The value of color variable is " + color + "<br/>";
   output.innerHTML += "The value of drawers variable is " + drawers + "<br/>";
   output.innerHTML += "The value of width variable is " + width + "<br/>";
</script>
</html>

使用者在本教程中學習如何解構具有預設值的物件。此外，使用者可以在建立變數時使用一些預設值初始化變量，而不是在解構物件時為其指派一些預設值。

從上面的範例我們可以了解到，當一個物件包含任何屬性時，都會將該屬性值設為變數；否則，變數將保持預設值。

以上是在 JavaScript 解構物件時如何設定預設值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript es6 对象

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何使用 FabricJS 移動文字中單一字元的基線？下一篇：如何使用 FabricJS 移動文字中單一字元的基線？

看更多