JavaScript 对象解构

上一页
下一页

对象解构

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

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

语法

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

示例：基本对象解构

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

示例：解构较少的属性

下面的代码演示了你可以只解包所需的属性，而保持其他属性不变。这里，对象共有 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 解构赋值允许你使用默认值初始化变量。

示例

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

示例

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

<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

对象解构和 rest 运算符

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

示例

在下面的代码中，nums 对象包含 4 个属性。在解构时，num1 属性的对象值存储在 num1 变量中。使用 rest 运算符将其他剩余属性存储在 '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
打印页面
上一页
下一页
广告