解构赋值笔记

                                                           解构赋值

1.概念

ES6允许按照一定模式从数组和对象中提取值，然后对变量进行赋值，该操作即为解构。本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

2．数组解构赋值

1.  用法

•  先从数组中提取值，再按照对应位置对变量进行赋值。（如下）

        

• 数组结构赋值中，数组的元素是按次序排列的，变量的取值是由它的位置决定，故赋值过程中需要占位（如下）

          

•  数组解构赋值中，‘…’用法（将剩下的值全赋给该元素）（如下）

        

•  数组解构赋值中，如果解构不成功，变量值就等于undefined.（如下）

        

• 数组赋值中，如果没有变量接收的结构值会被忽略掉。（即左边的模式只匹配一部分的等号左边的数组，这种情况称为不完全解构，解构依然成功）
• 如果赋值不是数组就会报错。（如下）

       

3．对象解构赋值

1.用法

• 对象的属性没有次序，变量必须与属性同名才能取到正确的值，也就是说对象的结构赋值的内部机制是先找到同名属性，然后再赋值给对应的变量。（如下）

        

•  对象解构赋值中，如果变量名与属性名不一致，必须明确对应关系。（如下）

       

               （上图中，foo是模式，baz是变量）

•   对象结构赋值的嵌套（如果解构模式是嵌套的对象，且子对象所在父属性存在，将会报错。）（如下）

           

•  如果解构失败，变量的值等于undefined。
• 如果要将一个已经声明的变量用于结构赋值，需要将解构赋值视为一个表达式，用括号括起来。（如下）

          let x;

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

• 由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。（如下）

          

4.字符串的结构赋值

1.  用法

• 字符串的解构赋值，将字符串看作一个类似于数组的对象。（如下）

       

• 类似数组的对象都有一个length属性，因此还可以对这个属性进行解构。

5.布尔值和数值的结构赋值

1.  用法

• 如果等号左边是数组或者布尔值，则先转换为对象。（如果等号右边无法转换为对象，则会报错，如null和undefined。）（如下）

       

6.函数的结构赋值

函数调用时，会将实参传递给形参，其过程就是实参赋值给形参。因此，也可以使用解构赋值。其规则与数组、对象的解构赋值一致，关键看参数是采用哪种解构赋值方式。（用法如下）

       

7.默认值

解构赋值中允许指定赋值，但如果一个数组成员不严格等于undefined，默认值就不会生效。（null不严格等于undefined,故会报错）（如下）

•  数组结构默认值

       

• 默认值也可以引用解构赋值的其他变量，但是该变量必须声明。（如下）

        

 

• 对象解构赋值也指定默认值，且默认值生效条件是对象的属性严格等于undefined。（如下）

      

• 函数结构中也指定默认值（如下）

     

8．解构赋值的优势

• 便于交换变量的值（如下）

      

•  便于函数返回多个值

           函数只能返回一个值，如果要返回多个值，只能将它们放在数组或者对象中返回，但是运用结构赋值，就可以方便的取出这些值。（如下）

      

•  便于函数参数的定义（如下）

     

• 便于提取JSON数据
•  函数参数的默认值
• 遍历MAP结构
• 输入模块的指定方法