Javascript 简明教程

JavaScript - Smart Function Parameters

JavaScript 中 smart function parameters 的概念是使函数能够适应不同用例的一种方式。它允许函数在调用时处理传递给它的不同类型的参数。

The concept of smart function parameters in JavaScript is a way to make a function adaptable to different use cases. It allows the function to handle the different kinds of arguments passed to it while invoking it.

在 JavaScript 中，函数是可以复用代码的一个重要概念。在许多情况下，我们需要确保该函数能够灵活地处理不同的用例。

In JavaScript, the function is an important concept for reusing the code. In many situations, we need to ensure the function is flexible to handle different use cases.

以下是用智能参数定义函数的不同方法。

Here are different ways to define a function with smart parameters.

Default Function Parameters

在 JavaScript 中，使用默认函数参数是处理未定义的参数值或在调用函数过程中没有传递给函数的参数值的一种方式。

In JavaScript, the use of default function parameters is a way to handle the undefined argument values or arguments that haven’t passed to the function during invocation of the function.

在下面的代码段中，我们将参数 a 和 b 的默认值设置为 100 和 50。

In the below code snippet, we set default values of the parameters, a and b to 100 and 50.

function division (a = 100, b = 50) {
   // Function body
}

Example

在下面的代码中，division() 函数会返回参数 a 和 b 的除法。参数 a 的默认值为 100，参数 b 的默认值为 50，只要你想传递任何参数或传递未定义的参数，使用它们的默认值初始化的参数可用于从输出中打印的值进行观察。

In the below code, the division() function returns the division of the parameters a and b. The default value of parameter a is 100, and parameter b is 50 whenever you want to pass any argument or pass an undefined argument, parameters with initialized with their default value which you can observe from the values printed in the output.

<html>
<head>
   <title> JavaScript - Default parameters </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      function division(a = 100, b = 50) {
         return a / b;
      }
      document.getElementById("output").innerHTML =
	  division(10, 2) + "<br>" +
      division(10, undefined) + "<br>" +
      division();
    </script>
</body>
</html>

5
0.2
2

JavaScript Rest Parameter

当传递给函数的参数数量不确定时，你可以使用剩余参数。JavaScript 剩余参数允许我们收集单个数组中的所有剩余（rest）参数。剩余参数用三个点（…）表示，后跟一个参数。此参数在此作为函数内的数组使用。

When the number of arguments that need to pass to the function is not fixed, you can use the rest parameters. The JavaScript rest parameters allow us to collect all the reaming (rest) arguments in a single array. The rest parameter is represented with three dots (…) followed by a parameter. Here this parameter works as the array inside the function.

Syntax

按照以下语法在函数声明中使用剩余参数。

Follow the below syntax to use the rest parameters in the function declaration.

function funcName(p1, p2, ...args) {
    // Function Body;
}

Example

在下面的示例中，sum() 函数会返回作为参数传递的所有值之和。我们可以向 sum() 函数传递未知数量的参数。函数定义会收集“nums”数组中的所有参数。在函数体中，我们可以遍历“nums”数组并计算所有参数值的总和。

In the example below, the sum() function returns the sum of all values passed as an argument. We can pass an unknown number of arguments to the sum() function. The function definition will collect all arguments in the 'nums' array. After that, we can traverse the 'nums' array in the function body and calculate the sum of all argument values.

sum() 函数也将处理 0 个参数。

The sum() function will also handle the 0 arguments also.

<html>
<head>
   <title> JavaScript - Rest parameters </title>
</head>
<body>
   <p id = "demo"> </p>
   <script>
      function sum(...nums) {
         let totalSum = 0;
         for (let p = 0; p < nums.length; p++) {
            totalSum += nums[p];
         }
         return totalSum;
      }
      document.getElementById("demo").innerHTML =
	  sum(1, 5, 8, 20, 23, 45) + "<br>" +
      sum(10, 20, 30) + "<br>" +
      sum() + "<br>";
   </script>
</body>
</html>

102
60
0

注意 - 你应始终将剩余参数用作最后一个参数。

Note – You should always use the rest parameter as a last parameter.

JavaScript Destructuring or Named parameters

你可以将单个对象作为函数参数传递，并在函数定义中解构对象以仅从该对象获取所需的值。这也称为具名参数，因为我们根据对象的具名属性获取参数。

You can pass the single object as a function argument and destructuring the object in the function definition to get only the required values from the object. It is also called the named parameters, as we get parameters based on the named properties of the object.

Syntax

按照以下语法对函数使用解构参数。

Follow the below syntax to use the destructuring parameters with the function.

function funcName({ prop1, prop2, ... }) { }

在以上语法中，prop1 和 prop2 是作为函数 funcName 参数传递的对象的属性。

In the above syntax, prop1 and prop2 are properties of the object passed as an argument of the function funcName.

Example

在下面的示例中，我们定义包含三个属性的“watch”对象，并将其传递给 printWatch() 函数。

In the example below, we have defined the 'watch' object containing three properties and passed it to the printWatch() function.

printWatch() 函数解构作为参数传递的对象，并将“brand”和“price”属性作为参数。通过这种方式，你可以忽略函数参数中不必要的参数。

The printWatch() function destructuring the object passed as an argument and takes the 'brand' and 'price' properties as a parameter. In this way, you can ignore the arguments in the function parameter which are not necessary.

<html>
<head>
   <title> JavaScript - Parameter Destructuring </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      function printWatch({ brand, price }) {
         return "The price of the " + brand + "\'s watch is " + price;
      }

      const watch = {
	     brand: "Titan",
         price: 10000,
         currency: "INR",
      }
      document.getElementById("output").innerHTML = printWatch(watch);
   </script>
</body>
</html>

The price of the Titan's watch is 10000

以上三个概念为我们提供了传递函数参数的灵活性。

The above three concepts give us flexibility to pass the function arguments.