浅谈解构赋值的小技巧

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

不得不说，解构赋值对于前段工程师来说是一把利器，它既简洁又强大，有着极强的实用性。

在实际工作场景中，我们经常会处理一些深层嵌套的对象。

举个例子，假设你是校长，你们学校有三个年级，每个年纪有若干个班级，班级里的每个学生有着每次考试的各科成绩，如果用JS对象表示的话，大概是下面这样：

let school = {
  grade1: {
    class1: {
      DaQiao: {
        Math: 91,
        Chinese: 93,
        Enlish: 82
      },
      XiaoQiao: {
        Math: 33,
        Chinese: 56,
        Enlish: 93
      }
    },
    class2: {
      SunQuan: {}
    }
  },
  grade2: {},
  grade3: {}
}

我们可以看到，小乔的英语成绩不错，但是数学语文成绩却一塌糊涂，而大乔则是各科成绩都很优异，只是英语略逊一筹。

由于你是校长，有着更改考试成绩的无上权力，所以小乔和大乔都想着能不能让你偷偷帮着改一下考试成绩。

小乔由于数学语文成绩都很差，希望你帮她给这两科各加十分。大乔则是希望你帮她把英语提高五分。

不过你也有自己的原则，决定只帮其中一个人更改考试成绩，全凭自己的性癖心情。

这种情况写成代码的话大概是下面这样子：

if (dreamGirl === 'XiaoQiao') {
  school.grade1.class1.XiaoQiao.Math += 10
  school.grade1.class1.XiaoQiao.Chinese += 10
} else if (dreamGirl === 'DaQiao') {
  school.grade1.class1.DaQiao.English += 5
}

显然，这种深层嵌套的对象写起来非常得麻烦，当代码逻辑变得复杂的时候，这种情况尤为严重，这个时候我们就可以使用解构赋值了，像下面这样：

let {
  grade1: {
    class1: { DaQiao, XiaoQiao }
  }
} = school

if (dreamGirl === 'XiaoQiao') {
  XiaoQiao.Math += 10
  XiaoQiao.Chinese += 10
} else if (dreamGirl === 'DaQiao') {
  DaQiao.English += 5
}

有人可能要问了，解构赋值得到的不是新的变量吗，这么修改值的话会影响到本来school对象里的值吗？

其实这也是为什么我们解构的时候只解构到DaQiao和XiaoQiao这一层，而不是继续解构到Math，Chinese，English这一层。因为我们新创建的DaQiao和XiaoQiao这两个对象其实是原本对象的引用，换句话说是两个指针，分别和 school.grade1.class1.DaQiao，school.grade1.class1.XiaoQiao指向了同一个内存地址。如果我们继续解构，那么我们得到的变量都是值的拷贝，这时候我们直接修改Math，Chinese，English的值的话也就无法影响原来的school对象了。