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