JavaScript 默认参数

JavaScript 的默认参数功能允许你为函数参数指定默认值。默认参数的概念是在 ES6 中引入的。我们可以使用默认值初始化参数。因此，如果函数被调用时缺少参数或参数值为 undefined，则会使用函数中的默认值。

在 JavaScript 中，默认的函数参数值是 "undefined"。当函数被调用而缺少参数时，这些参数会被设置为 undefined。undefined 的参数值是可以接受的，但它可能会产生异常的结果。

在 ES6 版本之前的 JavaScript 中，我们需要在函数体内部检查参数值是否为 "undefined"。如果是的话，我们需要初始化参数为正确的值。

让我们通过下面的例子来理解这一点。

function sum(p, q) {
    return p + q;
}
sum(10, 20); // 30
sum(10); // NaN
sum(); // NaN

在这个例子中，我们观察到以下情况：

sum(10, 20) 返回两个参数的和，即 30。这里传递了两个参数。
sum(10) 返回 NaN。这里只传递了一个参数。第二个参数 q 被设置为 undefined。对 undefined 进行数学运算会返回 NaN。
sum() 也返回 NaN。这里没有传递参数。因此它们都被设置为 undefined。

当我们调用函数时缺少参数值，它返回 NaN，这是不寻常的。

为了克服这个问题，我们可以使用默认参数值，如果函数被调用时缺少参数值。

默认参数语法

在 JavaScript 中使用函数默认参数的语法如下：

function functName(param1 = defaultValue1, param2 = defaultValue2, ...) {
    // 在此处使用参数
}

在上述语法中，param1 的默认值被设置为 defaultValue1，而 param2 的默认值被设置为 defaultValue2。

让我们来看下面的例子：

示例（默认参数）

在下面的代码中，参数 p 和 q 分别具有默认值 30 和 40。

在输出中，与第一个例子不同的是，当缺少任何参数时，它返回默认参数值的总和。

<html>
<body>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      function sum(p = 30, q = 40) {
         return p + q;
      }
      output.innerHTML += "sum(10, 20)  ->  " + sum(10, 20) + "<br>"; // 10 + 20 = 30
      output.innerHTML += "sum(10)  ->  " + sum(10) + "<br>"; // 10 + 40 = 50
      output.innerHTML += "sum()  ->  " + sum() + "<br>"; // 30 + 40 = 70
   </script>
</body>
</html>

输出

sum(10, 20) -> 30
sum(10) -> 50
sum() -> 70

将表达式作为默认参数值传递

我们可以将表达式作为 JavaScript 函数的默认参数值传递。这个表达式也可以包含前一个参数的值。

示例

在下面的代码中，我们将表达式作为默认参数值传递。该表达式包含前一个参数的值。

在第二次函数调用的输出中，你可以看到 r 的值是 100，等于 (p = 5) * (q = 10) * 2。在第三次函数调用中，我们没有传递任何参数，因此所有参数都采用默认值。

<html>
<body>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      function sum(p = 2, q = p * 2, r = p * q * 2) {
         return p + q + r;
      }
      output.innerHTML += "sum(5, 10, 15)  ->  " + sum(5, 10, 15) + "<br>"; 
      // 5 + 10 + 15 = 30
      output.innerHTML += "sum(5, 10)  ->  " + sum(5, 10) + "<br>"; 
      // 5 + 10 + (5 * 10 * 2) = 115
      output.innerHTML += "sum()  ->  " + sum() + "<br>"; 
      // 2 + 4 + 16 = 22
   </script>
</body>
</html>

输出

sum(5, 10, 15) -> 30
sum(5, 10) -> 115
sum() -> 22

你不能在表达式中使用未初始化的参数。否则，代码会引发引用错误。

传递 `undefined` 参数

当你向函数调用传递 undefined 参数时，JavaScript 函数定义会使用默认参数值以避免不必要的错误。

<html>
<body>
   <p id="output"> </p>
   <script>
      let output = document.getElementById("output");
      function sum(p = 24, q = 26) {
         return p + q;
      }

      output.innerHTML += "sum(5, undefined)  ->  " +sum(5, undefined)+"<br>"; 
      // 5 + 26 = 31 
      output.innerHTML += "sum(undefined)  ->  " + sum(undefined) + "<br>"; 
      // 24 + 26 = 50
    </script>
</body>
</html>

输出

sum(5, undefined) -> 31
sum(undefined) -> 50

函数表达式作为默认参数

JavaScript 函数表达式也可以作为函数默认参数传递。

在下面的例子中，getNum() 函数返回 5。我们使用函数表达式作为参数 q 的默认值。

输出显示，当缺少第二个参数时，参数使用 getNum() 函数返回的值。

<html>
<body>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      function getNum() {
         return 5;
      }
      function mul(p = 5, q = getNum()) {
         return p * q;
      }

      output.innerHTML += "mul(10)  -> " + mul(10) + "<br/>";
      output.innerHTML += "mul() -> " + mul() + "<br/>";
   </script>
</body>
</html>

输出

mul(10) -> 50
mul() -> 25

函数可选参数

函数默认参数也被称作可选参数，因为即使我们不传递参数，函数也会无错误地给出输出。

你应该在函数开始处传递所有必需的参数，在函数末尾传递可选参数。

function sum(p, q=10){
   return p+q;
}

在上述 JavaScript 代码片段中，我们将可选参数 q 放在参数列表的末尾。

示例

下面的 JavaScript 代码展示了第一个参数是必需的，而第二个参数是可选的。

<html>
<body>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      function func(p, q=10) {
         return p + q;
      }
      output.innerHTML += "func(10, 20) -> " + func(10, 20);
   </script>
</body>
</html>

输出

func(10, 20) -> 30

如果你把可选参数放在开头，那么在调用函数时传递 undefined 值可能会遇到错误。

function sum(p=10, q){
   return p+q;
}
sum(,10) // Error
sum(10) // NaN

因此，如果你只传递一个参数，它将替换第一个参数的默认值，而第二个参数保持 undefined。