ES6变量解构赋值

ES6变量解构赋值

   ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。(解构赋值不仅适用于var命令，也适用于let和const命令。)

  

(1)以前，为变量赋值，只能直接指定值。var a=1,b=2;

 

    ES6 可以写成如下：

    var[a,b,c]=[1,2,3];

   

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

 

 

(2)另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。

 

   let[x,y]=[1,2,3]; // x=1,y=2

  

   let[a,[b],d]=[a,[2,3],4];  //a=1,b=2,d=4

  

(3)解构不仅可以用于数组，还可以用于对象。

   对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

   对象的解构赋值是下面形式的简写:

   var{foo:fo,bar:ba}={foo:"aaa",bar:"bbb"};

   //fo="aaa",ba="bbb"

  

   对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

  

(4)对象的解构也可以指定默认值。

  

   let foo;

   ({foo}= {foo:1});

  

   let baz;

   ({bar:baz}={bar:1});

  

   注意：默认值生效的条件是，对象的属性值严格等于undefined。

如果要将一个已经声明的变量用于解构赋值，必须非常小心。

 

   //错误的写法                                          

      varx;

      {x}={x:1};

  

   上面代码的写法会报错，因为JavaScript引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免JavaScript将其解释为代码块，才能解决这个问题。

 

   //正确的写法                                          

      ({x}={x: 1})

  

(5)函数参数解构赋值：

 

   fuctionadd([x,y]){

      returnx+y;

   } 

      add([1,2]);  // 3

  

   上面代码中，函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，它们能感受到的参数就是x和y。

函数参数的解构也可以使用默认值

  

  

用途 ：

 

1：交换变量的值。

   下面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。

   [x`y]=[y`x];

2：从函数返回多个值。

      函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

  

3：函数参数的定义。

       解构赋值可以方便地将一组参数与变量名对应起来。

4：提取JSON数据。

      解构赋值对提取JSON对象中的数据，尤其有用。

5：函数参数的默认值。

   指定参数的默认值。