一个令人兴奋的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];
  *console*.log(*a*);//结果：a的值为1
  *console*.log(*b*);//结果：b的值为2
  *console*.log(*c*);//结果：c的值为undefined
​
​

 

还是接着上面的不完全解构例子讲解，变量a和变量b为不完全解构，那么变量c解构不成功会怎么样呢？记住，解构不成功，变量的值就等于undefined。相当于只声明了变量c，但是没赋值。

4. 允许设定默认值

 

 

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

 

例子中变量c已经指定默认值为3，即使右侧没有与之对应的值赋给它也没关系，它都可以成功赋值为3，如果你想覆盖默认值3，只需赋一个有效的值即可。如下：

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

这个时候默认值3会被新的值4覆盖，c的值为4；注意：当新的值为undefined的时候，是不会覆盖默认值的。

以上是数组的解构赋值，除了利用数组可以解构赋值外，用JSON对象也可以

对象的解构赋值

对象的解构赋值跟数组的解构赋值很类似，我们来看一段小代码：

 

  var { *a*,*b*,*c*} = {"a":1,"b":2,"c":3};
  *console*.log(*a*);//结果：a的值为1  
  *console*.log(*b*);//结果：b的值为2
  *console*.log(*c*);//结果：c的值为3

 

这段例子的代码是不是跟数组的解构赋值很相似，只不过是数组换成了对象。但是两者有一个不同的地方，我们对上面的代码稍做修改：

 

  var { *a*,*b*,*c* } = {"a":1,"c":3,"b":2};
  *console*.log(*a*);//结果：a的值为1
  *console*.log(*b*);//结果：b的值为2
  *console*.log(*c*);//结果：c的值为3

 

 

我把右侧的对象属性b和属性c的位置进行了调换，但这并不会影响赋值的结果，变量b和变量c的值不会改变，依然是b为2，c为3。这就告诉我们对象的解构赋值不会受到属性的排列次序影响（数组则会受影响），它是跟属性名关联起来的，变量名要和属性名一致，才会成功赋值。

 

如果变量找不到与其名字相同的属性，就会赋值不成功，如下面的例子：

 

  var { *a* } = {"b":2};
  *console*.log(*a*);//结果：a的值为undefined

 

变量a在右侧找不到与之名字匹配的属性a，所以变量a赋值不成功，a的值为undefined。

 

但也不是完全没有办法补救的，如果你想给一个变量名与属性名不一样的变量解构赋值，可以这样写：

 

  var { b:*a*,} = {"b":2};
  *console*.log(*a*);//结果：a的值为2

 

这样变量a同样可以赋值成功，a的值最终为2。

 

对象的解构赋值的用法与数组的解构赋值也很类似：

 

1、对象解构赋值也可以嵌套

​
  var {a:{*b*}} = {"a":{"b":1}};
  *console*.log(*b*);//结果：b的值为1
​

 

2、可以指定默认值

  var {*a*,*b*=2} = {"a":1};
  *console*.log(*b*);//结果：b的值为默认值2
​
​

字符串的解构赋值

除了对象和数组可以解构赋值外，字符串也可以这么玩，看看下面的例子：

 

  var [*a*,*b*,*c*,*d*,*e*,*f*] = "我就是前端君";
  *console*.log(*a*);//我
  *console*.log(*b*);//就
  *console*.log(*c*);//是
  *console*.log(*d*);//前
  *console*.log(*e*);//端
  *console*.log(*f*);//君

 

 

这是因为在解构赋值的过程中，字符串被转换成了一个类似数组的对象。变量a，b，c，d，e，f都分别赋上了对应的值。

 

 

解构赋值的用途

 

 

介绍了这么多解构赋值的用法，最重要的还是要介绍它的用途。

 

一、交换变量的值

传统做法最常用的是引入第三个变量来临时存放，如下：

 

  var *x* = 1;
  var *y* = 2;
  var *z* = *x*;//第三个变量临时存放x的值
  *x* = *y*; //把y的值赋给x；
  *y* = *z*; //把z的值赋值给y；
  *console*.log(*x*); //结果：x为2
  *console*.log(*y*); //结果：y为1
​
​

 

但是有了解构赋值，想交换两个变量的值就简单多了。看下面的代码：

  var *x* = 1;
  var *y* = 2;
  [*x*,*y*] = [*y*,*x*];

 

简单的一句代码即可成功交换x，y的值。

 

二、提取函数返回的多个值

函数只能返回一个值，我们可以将多个值装在一个数组或者对象中，再用解构赋值快速提取其中的值。

 

  function *demo*(){
    return {"name":"张三","age":21}
  }
  var {*name*,*age*} = *demo*();
  *console*.log(*name*);//结果：张三
  *console*.log(*age*);//结果：21

 

 

将demo函数的运行结果直接通过结构赋值赋给变量name和age，实现快速的提取对应的值。

 

三、定义函数参数

 

  function *demo*({*a*,*b*,*c*}){
    *console*.log("姓名："+ *a*);
    *console*.log("身高："+ *b*);
    *console*.log("体重："+ *c*);
  }
  *demo*({a:"张三",b:"1.72m",c:"50kg",d:"8000"});
​
​

 

通过这种写法， 很方便就能提取JSON对象中想要的参数，例如案例中，我们只需要获取实参中的：a，b，c，而不需要关其他的参数，比如：d或者其他更多的参数。

 

 

四、函数参数的默认值

传统的参数默认值的实现方式是，先判断该参数是否为undefined，如果是代表没传，需要手动给它赋一个值，如：

 

  function *demo*(*a*){
    var name;
    if(*a* === undefined){//判断参数书否是否传值
    name= "张三"; //没传，赋默认值
   }else{
      name= *a*;
    }
    *console*.log(name);
  }
​
​

 

但是有了解构赋值，一切都变得简单很多！看下面的代码：

 

 

 

 function *demo*({*name*="张三"}){
    *console*.log("姓名："+*name*);//结果：姓名：张三
  }
  *demo*({});
​
​

 

上面的代码给我们展示了通过解构赋值设定函数参数的默认值，简洁地代码即可实现。函数调用的时候没有传入对应的name参数，此时name就会使用默认值：“张三”，是不是很简洁很方便....

 

以上介绍了解构赋值的4个用途，你是不是也感觉到了它给我们带来的方便，它使我们的代码量大大的减少，并且语法十分清晰，增加了代码的可读性和表现力。

 

除了这些用途以外，解构赋值在其他领域都有很好的应用，因为涉及到ES6的其他新知识，就放在在后面的教程再展开讲解。

本节总结

 

总结：解构赋值给我们一种新的变量赋值方式，主要可以利用数组解构赋值和对象解构赋值。它的用途包括：交换变量值，提取函数返回值，函数参数定义，默认值设定等等，都给我们编程带来便利，在未来的代码中会见到越来越多人使用这个新特性。

 

更多前端学习内容文章干货请关注我的专栏(不断更新)

阿里名厂标准web前端高级工程师教程目录大全,从基础到进阶,看完保证您的薪资上升一个台阶

在这里我给大家准备了很多的学习资料

其实你与阿里工程师的差距只差这些东西