一个令人兴奋的ES6星特性-结构赋值

​

​ 学完了前4节，今天我给大家带来的是一个令人兴奋的特性：解构赋值。这个章节代码片段有点偏多，不过可以放心，一点都不烧脑，还是老样子：简单易懂。

什么是解构赋值

​ 按照一贯的套路，接下来的内容是解释：什么是解构赋值？

​ 来看看官方的解释：

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

​ 这句话也不难理解, 来，我们来上一段代码进一步解释一下什么叫解构赋值。

关于给变量赋值，传统的变量赋值是这样的：

  var *arr* = [1,2,3];//把数组的值分别赋给下面的变量；
  var *a* = *arr*[0];
  var *b* = *arr*[1];
  var *c* = *arr*[2];

  *console*.log(*a*);//a的值为1
  *console*.log(*b*);//b的值为2
  *console*.log(*c*);//c的值为3

​ 将数组的元素值1，2，3分别赋值给变量a，b，c，结果也是如我们所愿，赋值成功，这是一种传统的赋值方式。

​ 我们今天要介绍解构赋值会是怎样的？一起往下看。

变量的解构赋值：

 var [*a*,*b*,*c*] = [1,2,3]; //把数组的值分别赋给下面的变量；
  *console*.log(*a*);//a的值为1
  *console*.log(*b*);//b的值为2
  *console*.log(*c*);//c的值为3

​

​ 注意到了吗？赋值的代码大大减少了，不需要分别把变量a，b，c分别声明定义和赋值，只需要将变量a，b，c作为一个数组的元素，然后将数组[1,2,3]赋值给数组[a,b,c]即可，变量a，b，c即可分别得到对应的值。

​ 看吧，代码是不是简短了很多，可读性也很强，这种叫做数组的解构赋值。

​

数组的解构赋值

​ 数组的解构赋值的用法有以下几情况要注意：

1、结构赋值可以嵌套的

  var [ *a*,*b*,[ *c1*,*c2* ] ] = [ 1,2,[ 3.1,3.2 ] ];
  *console*.log(*c1*);//结果：c1的值为3.1
  *console*.log(*c2*);//结果：c2的值为3.2

​

​ 如我们的预料，数组中即使再嵌套另一个数组，结构赋值也能为我们的变量准确的赋值，c1和c2的值分别为3.1 , 3.2，也就是赋值成功。

2、不完全解构

  var [*a*,*b*,*c*] = [1,2];
  *console*.log(*a*);//结果：a的值为1
  *console*.log(*b*);//结果：b的值为2

​ 当左边的模式（你可以理解为格式）与右边不完全一样的时候，那么赋值过程中，只会给模式匹配成功的部分的变量赋值，例如：变量c没有在右边找到匹配的模式，所以无法进行赋值，但这并不影响变量a和变量b的赋值，因为它们在右边找到与之匹配的模式，这种叫做不完全解构。

3. 赋值不成功，变量的值为undefined

  var [*a*,*b*,*c*] = [1,2