对象解构赋值的用处：处理前端定义的数据结构与返回数据不一致的情况

关键词: 解构

有时候后端接口还未完成，就要先写前端静态页面。由于后端还未给接口，因此前端开发人员还不知道返回的数据到底长啥样。有以下两种方式：

// 前端定义的数据结构
const person = {
  basic: {
    name: "",
    age: "",
  },
  likes: {
    fruits: [],
    subjects: [],
  },
};

// 后端返回的数据解构
const res = {
  name: "fingertips",
  age: 200,
  fruits: ["apple", "banana"],
  subjects: ["math", "physics"],
};

// 以前的方式
person.basic.name = res.name;
person.basic.age = res.age;
person.likes.fruits = res.fruits;
person.likes.subjects = res.subjects;

// 利用对象解构赋值，将后端返回的数据填充到前端定义好的数据结构
({
  name: person.basic.name,
  age: person.basic.age,
  fruits: person.likes.fruits,
  subjects: person.likes.subjects,
} = res);

//这两种方式的是否有性能上的区别暂时还不知道，希望知道的同学可以指点指点😄

结果