JavaScript 嵌套解构

在javascript中，解构允许我们从数组中提取或拆解值，或者从对象的键/属性中提取，然后在某些地方重复使用，比如将它们赋值给变量等。它作为一种替代方案来手动访问值，使用点号(.)或方括号([])来访问。

嵌套解构是解构的一个子集，其中我们提取嵌套在另一个对象/数组中的对象/数组的属性。

示例1

在这个示例中，我们将展示从person对象中提取“name”和“age”属性，并将它们分别赋值给相应的变量。这样可以以简洁的方式提取值，并大大提高代码的可读性。使用点号或方括号表示法，我们将不得不为不同的属性提取写不同的代码行。

文件名：index.html

<html lang="en">
<head>
   <title>Nested de-structuring in JavaScript</title>
</head>
<body>
   <h3>Nested de-structuring in JavaScript</h3>
   <pre id="code"></pre>

   <script>
      const code = document.getElementById("code");

      const person = {
         name: "John Doe",
         age: 30,
         address: {
            city: "New York",
            country: "USA",
         },
      };

      // Destructuring assignment
      const { name, age } = person;

      console.log(name); // Output: John Doe
      console.log(age); // Output: 30

      code.innerHTML = `name:  ${name}, age:$ {age}`;
   </script>
</body>
</html>

输出

JavaScript 嵌套解构

示例2

在这个示例中，我们将演示从学生对象中提取名称属性，并将其赋值给名称变量。我们还将从嵌套的课程对象中提取名称、学期和成绩属性，并将它们分别赋值给courseName、semester和midterm、final、assignment。

文件名：index.html

<html lang="en">
<head>
   <title>Nested de-structuring in JavaScript</title>
</head>
<body>
   <h3>Nested de-structuring in JavaScript</h3>
   <pre id="code"></pre>

   <script>
      const code = document.getElementById("code");

      const student = {
         name: "Jane Smith",
         age: 21,
         course: {
            name: "Computer Science",
            semester: 4,
            grades: [80, 90, 85],
         },
      };

      // Nested destructuring assignment
      const {
         name,
         course: {
            name: courseName,
            semester,
            grades: [midterm, final, assignment],
         },
      } = student;

      console.log(name); // Output: Jane Smith
      console.log(courseName); // Output: Computer Science
      console.log(semester); // Output: 4
      console.log(midterm); // Output: 80
      console.log(final); // Output: 90
      console.log(assignment); // Output: 85

      code.innerHTML = `name:  ${name}, courseName:$ {courseName} semester:  ${semester} midterm:$ {midterm} final:  ${final} assignment:$ {assignment}`;
   </script>
</body>
</html>

输出

JavaScript 嵌套解构

示例3

在这个示例中，我们将在一个二维数组matrix上进行嵌套数组解构。通过使用嵌套解构，我们将跳过第一行和第二行的前两个元素，并将值6赋给六个变量。

文件名：index.html

<html lang="en">
<head>
   <title>Nested de-structuring in JavaScript</title>
</head>
<body>
   <h3>Nested de-structuring in JavaScript</h3>
   <pre id="code"></pre>

   <script>
      const code = document.getElementById("code");

      const matrix = [
         [1, 2, 3],
         [4, 5, 6],
         [7, 8, 9],
      ];

      const [, [, , six]] = matrix;
      console.log(six); // Output: 6

      code.innerHTML = `six = ${six}`;
   </script>
</body>
</html>