一、解构过程
解构是指在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}
总结：今天重温了下变量的解构赋值，简单记录，避免遗忘。
网友评论