Javascript 简明教程

JavaScript - Object Destructuring

Object Destructuring

对象解构赋值是 JavaScript 表达式，可让您解包并赋值对象属性到各个变量中。各个变量的名称可以与对象属性相同或不同。

当您拥有一个具有大量属性的对象，而您只需要其中一些属性时，对象解构非常有用。

Syntax

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 是对象属性。它涵盖了对象解构的不同用例。

Example: Basic Object Destructuring

在下面的示例中，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

Example: Destructuring with less properties

下面的代码演示了您只可以解包所需的属性并在原样保留其他属性。此处，对象总共包含 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

Object Destructuring and Renaming Variables

在 JavaScript 对象解构中，不必用与对象属性相同的名称将对象属性值存储到变量中。

您可以编写一个新的变量名称，后跟冒号，后跟一个对象属性名称。通过这种方式，您可以在解构对象时重命名对象属性。

Example

在下面的示例中，我们已将 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

Object Destructuring and Default Values

在许多情况下，对象属性可能包含未定义的值，或对象中不存在特定属性。如果属性未定义，JavaScript 解构赋值允许您使用默认值初始化变量。

Example

在下面的代码中，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

Example

在下面的代码中，我们已重命名变量并将默认值分配给变量。我们使用冒号更改变量名，使用赋值运算符分配默认值。

<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

Object Destructuring and Rest Operator

JavaScript 剩余参数的语法是三个点（…）。它允许您将剩余的对象属性收集到对象格式的单个变量中。让我们通过下面的示例来理解它。

Example

在下面的代码中，nums 对象包含 4 个属性。在解构时，num1 属性的对象值存储在 num1 变量中。使用剩余运算符，其他剩余属性存储在’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}

Object Destructuring and Function Parameter

您可以将 JavaScript 对象作为函数参数传递。之后，您可以在函数定义的参数中解构对象。

Example

在下面的代码中，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