极客笔记如何在JavaScript中对对象进行解构时设置默认值
ES6版本的JavaScript引入了数组和对象解构功能。数组和对象的解构允许我们将其值存储在不同的变量中。之后，我们可以使用该变量来访问对象的特定属性的值。
在对数组对象进行解构时，我们需要关注的主要是默认值。例如，我们在解构对象中添加了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对象。然后，我们将employee对象解构到id、name、salary和age变量中。同时，我们用默认值22初始化了age变量。
在输出中，我们可以观察到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和color变量。用户可以观察到，由于table对象不包含width属性，width变量的值为4英尺，这是默认值。
对于其他变量，它们从对象属性中获取值。例如，颜色变量的默认值为black。然而，由于对象包含一个值为green的color属性，所以将green分配为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>
用户在本教程中学会了使用默认值对对象进行解构。此外，在创建变量时，用户可以初始化变量并赋予一些默认值，而不是在解构对象时给它们赋予默认值。
从上面的示例中，我们可以看到当一个对象包含任何属性时，它会将属性值设置为变量的值；否则，变量将保持默认值。