对于ES6函数的参数解构赋值与默认值相结合,初学很容易迷糊,在网上翻阅一番,并没有详细的讲解,
在此拿一个最普及的例子来详解其中的原理,两种写法都是使用了双重默认值:
// 写法一function m1({x = 0, y = 0} = {}) {
return [x, y];}
// 写法二function m2({x, y} ={ x: 0, y: 0 }) {
return [x, y];}
1、// 函数没有参数的情况,参数严格为undefined,参数默认值生效
m1() // [0, 0]
m2() // [0, 0]
详解:
写法一:使用默认的参数“空对象{}”进行解构,实际执行的解构是{x = 0, y = 0}={},由于右边x、y严格等于undefined,所以使用解构默认值为x = 0, y = 0;
写法二:使用默认的参数“{ x: 0, y: 0 }”进行解构,实际执行的解构是{x, y} ={ x: 0, y: 0 },解构成功,解构所得值为x = 0, y = 0;
2、// x 和 y 都有值的情况
m1({x: 3, y: 8}) // [3, 8]m2({x: 3, y: 8}) // [3, 8]
详解:写法一、写法二相同:由于参数不为空,参数默认值无效,所以执行的解构为{x = 0, y = 0} = {x: 3, y: 8},解构成功,解构所得值为x = 0, y = 0;
3、// x 有值,y 无值的情况,所传参数不严格为undefined,参数默认值无效;
m1({x: 3}) // [3, 0]
m2({x: 3}) // [3, undefined]
详解:写法一:实际执行的解构为{x = 0, y = 0} = {x: 3},x值为3;解构右侧y值严格为undefined,所以y使用解构默认值0;
写法二:实际执行的解构为{x, y} = {x: 3},x值为3;解构右侧y值严格为undefined,所以y解构时也为undefined;
4、// x 和 y 都无值的情况,参数默认值无效
m1({}) // [0, 0];m2({}) // [undefined, undefined]
详解:
写法一:实际执行的解构为{x = 0, y = 0} = {},x值为0;y值也为0;
写法二:实际执行的解构为{x, y} ={},由于解构时,右侧x,y完全为undefined,且没有默认值,所以x、y都为undefined;
5、//传入不包含x,y的对象
m1({z: 3}) // [0, 0]
m2({z: 3}) // [undefined, undefined]
详解:写法一:实际执行的解构为{x = 0, y = 0} = {Z:3},解构失败,使用x、y的默认值,x值为0;y值也为0;
写法二:实际执行的解构为{x, y} ={z:3},由于解构失败,右侧x,y完全为undefined,且没有默认值,所以x、y都为undefined;