Javascript 简明教程

JavaScript - Default Parameters

JavaScript 中的 default parameters 是一项允许你为函数参数指定默认值的功能。默认参数的概念是在 ES6 中引入的。我们可以通过默认值初始化参数。因此,在没有参数或参数被赋予未定义值的情况下调用该函数时,它将使用函数中参数的默认值。

在 JavaScript 中,函数参数的默认值是“未定义”。当使用没有参数的情况下调用一个函数时,参数被设置为“未定义”。未定义的参数值是不可接受的,但可能会产生一些不寻常的结果。

在 JavaScript ES6 版本之前,我们需要检查函数体内的参数值是否“未定义”。如果是,它们需要使用合适的初始化参数。

让我们通过以下示例了解它。

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

在这个示例中,我们观察了以下问题:

  1. sum(10, 20) 返回两个参数之和,即 30。这里传递了两个参数。

  2. sum(10) 返回 NaN。这里只传递了一个参数。第二个参数 q 被设置为未定义。对未定义进行数学运算返回 NaN。

  3. sum() 也返回 NaN。这里两个参数都没有。所以它们被设置为未定义。

当我们使用缺失的参数值调用函数时,它会返回一个非正常结果 NaN。

为了解决这个问题,我们可以使用默认参数值,以在使用缺失的参数值情况下调用函数。

Default Parameters Syntax

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

function functName(param1 = defaultValue1, param2 = DefaultValue2, ..) {
    // Use parameters here
}

在上面的语法中,param1 的默认值设置为 defaultValue1,而 param2 的默认值设置为 defaultValue2。

让我们看看下面的示例:

Example (Default parameters)

在下面的代码中,参数 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

Passing an expression as a default parameter value

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

Example

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

在第二个函数调用的输出中,你可以观察到 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

Passing Undefined Argument

当你向函数调用传递未定义参数时,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

Function expression as a default parameter

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

在下例中,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 Optional Parameters

函数默认参数也称为可选参数,即使我们不传递可选参数的参数,函数也会正常输出,不会有任何错误。

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

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

在以上的 JavaScript 代码片段中,我们在参数列表的末尾放置了可选参数 q。

Example

下面的 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

如果我们把可选参数放在开头,在使用未定义的值调用函数时,可能会遇到错误。

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

因此,如果你只传递一个参数,它将替换第一个参数的默认值,而第二个参数仍然是未定义的。