ES6+那些事之对象与数组的解构

2023-10-16 23:29:05

对象解构

对象解构允许我们将对象的属性赋给变量。例如，我们有一个名为person的对象，其中包含name、age和city属性：

const person = {
  name: 'John Doe',
  age: 30,
  city: 'New York'
};

使用传统的属性访问方法，我们可以这样访问person对象的属性：

const name = person.name;
const age = person.age;
const city = person.city;

使用对象解构，我们可以将这些属性一次性提取出来并赋给变量：

const { name, age, city } = person;

现在，我们就可以直接使用name、age和city变量了。

数组解构

数组解构允许我们将数组的元素赋给变量。例如，我们有一个名为numbers的数组，其中包含1、2和3：

const numbers = [1, 2, 3];

使用传统的数组索引方法，我们可以这样访问numbers数组的元素：

const firstNumber = numbers[0];
const secondNumber = numbers[1];
const thirdNumber = numbers[2];

使用数组解构，我们可以将这些元素一次性提取出来并赋给变量：

const [firstNumber, secondNumber, thirdNumber] = numbers;

现在，我们就可以直接使用firstNumber、secondNumber和thirdNumber变量了。

嵌套解构

对象和数组可以嵌套使用，因此我们也可以对嵌套的数据结构进行解构。例如，我们有一个名为school的对象，其中包含一个名为students的数组，数组中包含多个学生的姓名：

const school = {
  name: 'ABC School',
  students: [
    {
      name: 'John Doe',
      age: 18
    },
    {
      name: 'Jane Smith',
      age: 19
    }
  ]
};

使用传统的属性访问和数组索引方法，我们可以这样访问school对象的属性和数组元素：

const schoolName = school.name;
const students = school.students;
const firstStudentName = students[0].name;
const firstStudentAge = students[0].age;

使用嵌套解构，我们可以将这些数据一次性提取出来并赋给变量：

const { name: schoolName, students } = school;
const [
  { name: firstStudentName, age: firstStudentAge },
  { name: secondStudentName, age: secondStudentAge }
] = students;