在项目开发过程中,关于如何对函数的参数进行解构赋值我遇到了一些疑惑,本文将对我的学习进行一些分享结论。
解构赋值
先来了解一下简单的解构赋值,例子如下:
1 2 3 4
| let { x = 0, y = 0 } = { x: 4, y: 5 };
console.log(x);//4 console.log(y);//5
|
左边的对象中我们为x,y变量指定了默认值,而右边对象就是我们要赋给左边变量的真正的值。当右边x,y没有指定真正值的时候,变量的默认值就会生效(这时x === undefined
或 y === undefined
)。
衡量解构赋值的默认值是否生效的原则就是:看右侧变量是否为undefined
。
可以是以下几种情况:
当变量赋值为null时,解构赋值的默认值不会生效,变量值为null。因为在js中:
null !== undefined
null == undefined
函数参数默认值
现在说一下函数参数默认值的问题,如下:
1 2 3 4
| function foo(x = 0) { console.log(x); }
foo(); //0 这里没有传递实参,默认值生效 foo(10); //10 这里传递了实参,所以x=10
|
函数参数解构赋值
我们了解了解构赋值和函数默认值的用法后,现在把两者进行结合,我们来看几个例子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| function move({x = 0, y = 0} = {}) { return [x, y]; }
console.log(move({x: 3, y: 8})); // [3, 8] // 传递实参,所以函数默认值{}不生效,对实参{x: 3, y: 8}进行解构赋值,对应属性都有值,所以解构赋值默认值不生效,所以x=3,y=8.
console.log(move({x: 3})); // [3, 0] // 传递实参,所以函数默认值{}不生效,对实参{x: 3}进行解构赋值,x有对应值,所以x=3,y没有对应值,所以解构赋值默认值y生效,y=0.
console.log(move({})); // [0, 0] // 传递实参,所以函数默认值{}不生效,对实参{}进行解构赋值,x、y都没有对应值,所以解构赋值默认值生效,所以x=0,y=0.
console.log(move()); // [0, 0] // 未传递实参,所以函数默认值{}生效,对默认值{}进行解构赋值,x、y都没有对应值,所以解构赋值 默认值生效,所以x=0,y=0.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| function move({x, y} = {x: 0, y: 0}) { return [x, y]; }
console.log({x: 3, y: 8}); // [3, 8] // 传递实参,所以函数默认值不生效,对实参{x: 3, y: 8}进行解构赋值,x=8,y=8
console.log(move({x: 3})); // [3, undefined] // 传递实参,所以函数默认值不生效,对实参{x: 3}进行解构赋值,x有对应值,所以x=3,有没有对应值,且y没有解构赋值的默认值,所以y就是undefined.
console.log(move({})); // [undefined, undefined] // 传递实参,所以函数默认值不生效,对实参{}进行解构解析,x、y都没有对应值,且都没有解构赋值默认值,所以都为undefined。
console.log(move()); // [0, 0] // 未传递实参,函数默认值{x: 0, y: 0}生效,所以解构赋值默认值不生效,所以x=0,y=0.
|
参考链接:https://www.cnblogs.com/shineLh/articles/6877364.html