es6的变量解构赋值

一、解构过程

解构是指在es6的规则中，允许从数组或变量中提取变量并对其进行赋值的操作，若在解构不成功时，会给变量赋值为undefined。而且解构赋值有个规则就是，只要解构等号的右边值不是对象或数组，就先将其转为对象。但是undefined和null不能转为对象，所以对它们进行解构赋值，都会报错。

1.数组

    最简单的就是 let [a,b,c] = [1,2,3];其中a,b,c的值分别是1，2，3，有个需要注意的地方，在数组中，元素的排列是有序的，所以解构也是有顺序的，不可更改位置

2.对象

    let {a,b} = {a:'first',b:'second'} 此时，a ,b的值分别为first 和 second ；若let {a} = {f:"aaa",b:"bbb"};此时a的值将解构不成功，且被赋值为undefined。注意：在对象的解构当中，对象的属性没有次序，变量必须与对象的属性同名，才能取到正确的值。

3.字符串解构

     const [a,b,c,d,e] = 'hello！'; 解构后的对应的值分别为'h','e','l','l','o';有个特殊的地方就是，类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值，如let {length:len} = 'hello';输出的len就是字符串的长度。

4.数值和布尔值

    由于解构赋值的规则，只能对可以转化为对象的变量操作，故这种情况会报错：

    let {prop:x} = undefined; // TypeError

    let {prop:y} = null; // TypeError

5.函数参数

function fun({x=0,y=0}={}){

    return[x,y];

}

move({x:3,y:8}); // [3, 8]

move({x:3}); // [3, 0]

move({}); // [0, 0]

move(); // [0, 0]

[1,undefined,3].map((x='yes')=>x);输出结果[ 1, 'yes', 3 ]，undefined就会触发函数参数的默认值

---

二、解构目的

1.交换变量

    通过解构赋值操作，可以实现不用任何中间变量的两个变量值交换，[a,b] = [b,a];

2.实现函数返回多个值

    在以前的函数中，返回值只有一个，要么是一个对象，要么是一个数组或一个元素，现在我们利用解构赋值可以这样实现函数的多个返回值

    let [a,b,c] = function(){ return [1,2,3] },

3.使函数的参数一一对应起来

4.提取后台传过来的json数据

    利用解构赋值，通过对象的有序排列和键值，可实现数据的一一对应

    let json={

        id:42,

        status:"OK",

        data:[867,5309]

    };

let  {id,status,data:number} = jsonData;

此时id,status,number的输出结果分别为 42, "OK", [867, 5309]，实现了数据的一一对应

5.可指定函数参数的默认值

   以前我们在函数中传一个参数foo,若此时没有传参，就要加一个默认值，需要这样操作： var foo = config.foo || 'default foo';即foo的默认值为'default foo'，现在可以这样：

    let fun = function (foo = 'default foo'){//more deals}

---

总结：今天重温了下变量的解构赋值，简单记录，避免遗忘。