在项目开发过程中,关于如何对函数的参数进行解构赋值我遇到了一些疑惑,本文将对我的学习进行一些分享结论。

解构赋值

先来了解一下简单的解构赋值,例子如下:

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 === undefinedy === undefined)。

衡量解构赋值的默认值是否生效的原则就是:看右侧变量是否为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