Javascript 简明教程

JavaScript - Object Destructuring

Object Destructuring

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

The object destructuring assignments are JavaScript expressions that allow you to unpack and assign object properties into individual variables. The name of the individual variables can be the same as the object properties or different.

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

The object destructuring is a very useful feature when you have an object with a lot of properties and you only need a few of them.

Syntax

JavaScript 中的对象解构赋值语法如下 –

The syntax of Object Destructing assignment in JavaScript is as follows –

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

In the above syntax, 'obj' is an object. The prop1 and prop2 are object properties. It covers the different use cases of object destructuring.

Example: Basic Object Destructuring

在下面的示例中，watch 对象包含 brand 和 price 属性。

In the example below, the watch object contains the brand and price properties.

我们使用对象解构将对象属性的值存储到各个变量中。您可以在输出中看到 brand 的值和 price 变量，它们与对象属性值相同。

We store the values of the object properties into the individual variables using object destructuring. You can see the brand’s value and price variable in the output, which is the same as object property values.

<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 属性。

The code below demonstrates that you can unpack only required object properties and keep others as it is. Here, the Object contains total 4 properties. But we have unpacked only brand and price properties.

<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 对象解构中，不必用与对象属性相同的名称将对象属性值存储到变量中。

In JavaScript object destructuring, it is not necessary to store the object property values in the variables with the same name as object properties.

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

You can write a new variable name followed by a colon followed by an object property name. In this way, you can rename the object properties while destructuring the object.

Example

在下面的示例中，我们已将 brand 属性的值存储在“bd”变量中，将 color 属性存储在“cr”变量中，将 dial 存储在“dl”变量中。

In the example below, we have stored the value of the brand property in the 'bd' variable, the color property in the 'cr' variable, and the dial property in the 'dl' variable.

新变量的值与对象属性相同。

The values of the new variables are the same as the object properties.

<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 解构赋值允许您使用默认值初始化变量。

In many situations, an object property may contain an undefined value, or particular property doesn’t exist in the object. If the property is undefined, JavaScript destructuring assignment allows you to initialize the variables with default values.

Example

在下面的代码中，animal 对象包含 name 和 age 属性。

In the below code, the animal object contains the name and age properties.

我们解构对象并尝试从对象中获取 name 和 color 属性值。此处，对象中不存在 color 属性，但我们已使用默认值对其进行了初始化。

We destructure the object and try to get the name and color property values from the object. Here, the color property doesn’t exist in the object, but we have initialized it with the default value.

输出显示’yellow’为 color 变量的值，这是默认值。

The output shows 'yellow' as the color variable’s value, which is the default value.

<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

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

In the below code, we have renamed the variables and assigned the default values to the variables. We used the colon to change the variable name and the assignment operator to assign the default values.

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

The syntax of the JavaScript Rest parameter is three dots (…). It allows you to collect the remaining object properties into a single variable in the object format. Let’s understand it via the example below.

Example

在下面的代码中，nums 对象包含 4 个属性。在解构时，num1 属性的对象值存储在 num1 变量中。使用剩余运算符，其他剩余属性存储在’numbers’变量中。

In the below code, the nums object contains the 4 properties. While destructuring, the object value of the num1 property is stored in the num1 variable. Other remaining properties are stored in the 'numbers' variable using the rest operator.

在输出中，您可以看到’numbers’包含包含 nums 对象的剩余属性的对象。

In the output, you can see that 'numbers' contains the object containing the remaining properties of the nums object.

<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 对象作为函数参数传递。之后，您可以在函数定义的参数中解构对象。

You can pass the JavaScript object as a function argument. After that, you can destructure the object in the parameter of the function definition.

Example

在下面的代码中，nums 对象包含多个属性，我们已将其作为 sum() 函数的参数传递。

In the below code, the nums object contains multiple properties, and we have passed it as an argument of the sum() function.

在函数参数中，我们解构对象并在函数体内使用该变量。函数体返回对象属性的总和。

In the function parameter, we destructure the object and use that variable inside the function body. The function body returns the sum of object properties.

<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