資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 JavaScript 中解構物件時設定預設值？
陣列和物件解構功能是在 JavaScript 的 ES6 版本中引入的。陣列和物件的解構允許我們將它們的值儲存在單獨的變數中。之後，我們可以使用該變數訪問物件特定屬性的值。
在解構陣列物件時，我們需要關注的主要內容是預設值。例如，我們在解構物件中添加了 property3 變數，但如果物件不包含 property3，則解構會將 undefined 值設定為 property3 變數。
使用者可以參考下面的示例，瞭解解構如何將 undefined 值設定為不存在的屬性。
示例
在下面的示例中，我們建立了 demo_obj 物件，它包含具有某些整數值的 x 和 y 屬性。之後，我們解構 demo_obj 並嘗試將其屬性值設定為 w、x、y 和 z 變數。
在輸出中，我們可以觀察到 w 和 z 變數的值為 undefined，因為它們在 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 和 prop3 變數中解構物件。此外，我們還為 prop2 和 prop3 變數設定了預設值。
示例
在下面的示例中，我們建立了包含 id、name 和 salary 的 employee 物件。之後，我們在 id、name、salary 和 age 變數中解構 employee 物件。此外，我們還將 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>
示例
在下面的示例中，我們建立了 table 物件並將其解構為 id、drawer、width 和 colour 變數。使用者可以觀察到，由於 table 物件不包含 width 屬性，因此 width 變數的值為 4 英尺，這是預設值。
對於其他變數，它從物件屬性獲取值。例如，color 變數的預設值為黑色。但是，由於物件包含具有綠色值的 color 屬性，因此綠色被分配為 color 變數的值。
<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>
在本教程中，使用者學習瞭如何使用預設值解構物件。此外，使用者可以在建立變數時使用某些預設值初始化變數，而不是在解構物件時為其分配一些預設值。
從上面的示例中，我們可以瞭解到，當物件包含任何屬性時，它會將屬性值設定為變數；否則，變數將繼續包含預設值。
5K+ 瀏覽量
