Javascript 简明教程

JavaScript - Default Parameters

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

The default parameters in JavaScript are a feature that allows you to specify a default value for a function parameter. The concept of the default parameters was introduced in the ES6. We can initialize the parameters with the default values. So, if the function is called with missing argument or argument with an undefined value, it uses the default value of the parameter in the function.

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

The default value of a function parameter is "undefined" in JavaScript. When a function is called with missing arguments the parameters are set to 'undefined'. The undefined parameter values are acceptable but can generate unusual outcomes.

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

Before the ES6 version of JavaScript, we needed to check whether the parameter value was "undefined" inside the function body. If yes, they need to initialize the parameter with the proper value.

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

Let’s understand it via the example below.

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

在这个示例中，我们观察了以下问题：

In this example, we observe the following −

  1. sum(10, 20) returns the sum of the two arguments, i.e., 30. Here both arguments are passed.

  2. sum(10) returns NaN. Here only one argument is passed. The second parameter q is set to undefined. Mathematical operation on undefined returns NaN.

  3. sum() also returns NaN. Here both arguments are missing. So they are set to undefined.

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

When we call the function with missing argument values, it returns NaN which is unusual.

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

To overcome this problem, we can use default parameter values to be used if function is called with missing argument values.

Default Parameters Syntax

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

The syntax to use the function default parameters in JavaScript is as follows –

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

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

In the above syntax, the default value of the param1 is set to defaultValue1, and the default value of the param2 is set to defaultValue2.

让我们看看下面的示例：

Let’s look at the example below −

Example (Default parameters)

在下面的代码中，参数 p 和 q 包含默认值 30 和 40。

In the below code, parameter p and q contains the 30 and 40 default values, respectively.

在输出中，与第一个示例不同，你可以看到在缺失任何参数的情况下，它返回了默认参数值的和。

In the output, unlike the first example, you can see that it returns the sum of the default parameter values when any argument is missing.

<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 函数。该表达式也可以包含前面参数的值。

We can pass an expression as a default parameter value to a JavaScript function. The expression can also contain the values of the previous parameters.

Example

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

We pass the expression as a default parameter value in the code below. The expression contains the value of the previous parameters.

在第二个函数调用的输出中，你可以观察到 r 的值为 100，这等于 (p = 5) * (q = 10) * 2。我们没有在第三个函数调用中传递任何参数，所以所有参数均采用默认值。

In the output of the second function call, you can observe that the value of the r is 100, which is equal to (p = 5) * (q = 10) * 2. We haven’t passed any argument in the third function call, so all parameters take the default value.

<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 函数定义使用默认参数值来避免不必要的错误。

When you pass the undefined argument to the function call, the JavaScript function definition uses the default parameter values to avoid unnecessary errors.

<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 默认参数进行传递。

The JavaScript function expression can also be paased as a fucntion default parameter.

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

In the example below, the getNum() function returns 5. We used the function expression as a default value of parameter q.

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

The output shows that when the second argument is missing, the parameter uses the value returned from the getNum() function.

<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

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

The function default parameters are also called the optional parameters, as the function will give output without any error even if we don’t pass the arguments for the optional parameter.

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

You should pass all required parameters at the start and optional parameters at the function end.

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

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

In the above JavaScript code snippet, we put the optional parameter q at the end of the parameter list.

Example

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

The JavaScript code below shows that the first parameter is required, and the second parameter is optional.

<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

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

If we put the optional parameter at beginning, we may encounter error while calling the function with undefined value.

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

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

So, if you pass only a single argument, it replaces the default value of the first parameter, and the second parameter remains undefined.