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、name和salary的雇员对象。之后，我们在id、name、salary和age变量中对雇员对象进行了结构化。此外，我们还用22的默认值初始化了年龄变量。

在输出中，我们可以观察到年龄变量的值是22，这是一个默认值，因为雇员对象不包含年龄属性。

<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等变量。用户可以观察到，由于表格对象不包含宽度属性，宽度变量的值是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>