ES6新特性：解构赋值(上)

Posted 2020-10-01

1:什么是解构赋值

 

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

 

        来看看官方的解释：

 

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即可分别得到对应的值。

 

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