Javascript 简明教程

JavaScript - Destructuring Assignment

Destructuring Assignment

在 JavaScript 中, destructuring assignment 是一个表达式,它允许我们从数组或对象中解包值并将其存储在单独的变量中。这是一种将数组值或对象属性分配给变量的技术。

解构赋值语法在 ECMAScript 6 (ES6) 中引入。在 ES6 之前,开发人员会手动解包对象属性,如下面示例所示。

Array unpacking before ES6

在下面的示例中,“arr”数组包含水果名称。之后,我们创建了不同的变量并将数组元素分配给变量。

<html>
<body>
   <p id = "output"> </p>
   <script>
      const arr = ["Apple", "Banana", "Watermelon"];

      const fruit1 = arr[0];
      const fruit2 = arr[1];
      const fruit3 = arr[2];

      document.getElementById("output").innerHTML =
      "fruit1: " + fruit1 + "<br>" +
      "fruit2: " + fruit2 + "<br>" +
      "fruit3: " + fruit3;
   </script>
</body>
</html>
fruit1: Apple
fruit2: Banana
fruit3: Watermelon

如果数组不包含动态数量的元素,上面的代码将会起作用。如果数组包含 20 多个元素呢?您是否会编写 20 行代码?

这里解构赋值的概念就发挥作用了。

Array Destructuring Assignment

您可以按照以下语法使用解构赋值来解包数组元素。

const [var1, var2, var3] = arr;

在上述语法中,“arr”是一个数组。var1、var2 和 var3 是用于存储数组元素的变量。您还可以类似地解包对象。

Example

下面的示例实现了与上述示例相同的逻辑。在这里,我们使用了解构赋值来解包数组元素。代码给出的输出与上一个示例相同。

<html>
<body>
   <p id = "output"> </p>
   <script>
      const arr = ["Apple", "Banana", "Watermelon"];

      const [fruit1, fruit2, fruit3] = arr;

      document.getElementById("output").innerHTML =
      "fruit1: " + fruit1 + "<br>" +
      "fruit2: " + fruit2 + "<br>" +
      "fruit3: " + fruit3;
   </script>
</body>
</html>
fruit1: Apple
fruit2: Banana
fruit3: Watermelon

Example: Nested Array Destructuring

在下面的示例中,我们创建了一个嵌套数组。要访问这些元素,我们使用了嵌套数组解构赋值。尝试以下示例 –

<html>
<body>
   <p id = "output"> </p>
   <script>
      const arr = ["Apple", ["Banana", "Watermelon"]];
      const [x, [y, z]] = arr;
      document.getElementById("output").innerHTML =
      x + "<br>" +
      y + "<br>" +
      z ;
   </script>
</body>
</html>
Apple
Banana
Watermelon

Object Destructuring Assignment

您可以按照以下语法使用解构赋值来解包对象元素。

const {prop1, prop2, prop3} = obj;

在上述语法中,“obj”是一个对象。prop1、prop2 和 prop3 是用于存储对象属性的变量。

Example

下面的示例实现了与数组解构赋值示例中相同的逻辑。在这里,我们使用了解构赋值来解包对象元素。

<html>
<body>
   <div id = "output1"> </div>
   <div id = "output2"> </div>
   <script>
      const fruit = {
         name: "Apple",
         price: 100,
      }

      const {name, price} = fruit;
      document.getElementById("output1").innerHTML = "fruit name: " + name;
      document.getElementById("output2").innerHTML = "fruit price: " + price;

   </script>
</body>
</html>
fruit name: Apple
fruit price: 100

Example: Nested Object Destructuring

在下面的示例中,我们定义了一个名为 person 的嵌套对象,其中包含两个属性 age 和 name。name 属性包含两个属性,分别为 fName 和 lName。我们使用嵌套解构来访问这些属性。

<html>
<body>
   <div id = "output"> </div>
   <script>
      const person = {
         age: 26,
         name: {
            fName: "John",
            lName: "Doe"
         }
      }
      // nested destructuring
      const {age, name: {fName, lName}} = person;
      document.getElementById("output").innerHTML =
      "Person name: " + fName + " " + lName + "<br>"+
      "Person age: " + age;
   </script>
</body>
</html>
Person name: John Doe
Person age: 26

What’s Next?

在接下来的章节中,我们将深入学习以下概念:

  1. Array destructuring − 拆包数组元素。

  2. Object destructuring − 拆包对象属性。

  3. Nested destructuring − 拆包嵌套数组元素和嵌套对象。