掌握JS参数默认值问题的解决方案

用另一种方式理解默认值

前言

在JavaScript中，使用下面这种形式可以给方法参数设置默认值：

function func(param = defaultValue) {
  // ...
}

但是，这种方式只支持两种情况：

• 不传该参数
• 传入值是undefined

其他falsy值（如null、false、0、""等）不会使用默认值，而是使用undefined。

在某些情况下，这可能会导致问题。例如，我们有一个函数，用于计算两个数字的和：

function sum(a, b = 0) {
  return a + b;
}

如果我们调用这个函数，并传入一个falsy值（如null、false、0、""等），则结果将为undefined：

console.log(sum(1, null)); // undefined

这显然不是我们想要的。我们希望，无论传入什么值，函数都能正确计算出两个数字的和。

解决方案

为了解决这个问题，我们可以使用一种替代方法来处理默认值：

function func(param) {
  param = param !== undefined ? param : defaultValue;
  // ...
}

这种方法可以确保，无论传入什么值，函数都能正确使用默认值。

例如，我们使用上面的方法来修改一下sum函数：

function sum(a, b) {
  b = b !== undefined ? b : 0;
  return a + b;
}

现在，无论我们传入什么值，函数都能正确计算出两个数字的和：

console.log(sum(1, null)); // 1
console.log(sum(1, false)); // 1
console.log(sum(1, 0)); // 1
console.log(sum(1, "")); // 1

扩展

上述方法可以扩展到多个参数的情况。例如，我们可以有一个函数，用于计算任意多个数字的和：

function sum(...nums) {
  let result = 0;
  for (const num of nums) {
    result += num !== undefined ? num : 0;
  }
  return result;
}

现在，我们可以使用这个函数来计算任意多个数字的和：

console.log(sum(1, 2, 3, 4, 5)); // 15
console.log(sum(1, null, 3, 4, 5)); // 13
console.log(sum(1, false, 3, 4, 5)); // 13
console.log(sum(1, 0, 3, 4, 5)); // 13
console.log(sum(1, "", 3, 4, 5)); // 13

总结

在JavaScript中，使用默认值来处理函数参数，是一个非常常用的技巧。但是，需要注意的是，默认值只支持两种情况：不传该参数、传入值是undefined。其他falsy值（如null、false、0、""等）不会使用默认值，而是使用undefined。

为了解决这个问题，我们可以使用一种替代方法来处理默认值：

function func(param) {
  param = param !== undefined ? param : defaultValue;
  // ...
}

这种方法可以确保，无论传入什么值，函数都能正确使用默认值。