JavaScript - 对象解构

对象解构

对象解构赋值是一种 JavaScript 表达式，允许你将对象属性解包并赋值给单独的变量。单独变量的名称可以与对象属性相同，也可以不同。

当你的对象有很多属性，而你只需要其中几个属性时，对象解构是一个非常有用的功能。

语法

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

const { prop1, popr2 } = obj;
或
const { prop1: p1, prop12: p2 } = obj; // 重命名变量
或
const { prop1 = default_vaule } = obj; // 使用默认值
或
const { prop1, ...prop2 } = obj; // 使用剩余参数

在上述语法中，"obj"是一个对象。prop1 和 prop2 是对象属性。它涵盖了对象解构的不同用例。

示例:基本对象解构

在下面的示例中，手表对象包含品牌和价格属性。

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

<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

示例:使用较少属性进行解构

以下代码演示了如何仅解包必需的对象属性，而保留其他属性。此处，对象总共包含 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

对象解构和变量重命名

在 JavaScript 对象解构中，无需将对象属性值存储在与对象属性同名的变量中。

您可以编写一个新的变量名，后跟冒号，再跟一个对象属性名。这样，您可以在解构对象时重命名对象属性。

示例

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

对象解构与默认值

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

示例

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

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

输出显示 color 变量的值"yellow"，即默认值。

<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

示例

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

<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

对象解构和剩余运算符

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

示例

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

对象解构与函数参数

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

示例

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

❮ ❯

JavaScript 基础教程

JavaScript 运算符

JavaScript 控制流

JavaScript 函数