JavaScript - 智能函数参数

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

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

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

默认函数参数

在 JavaScript 中，使用默认函数参数是一种处理未定义的参数值或在调用函数期间未传递给函数的参数的方法。

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

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

示例

在下面的代码中，division() 函数返回参数 a 和 b 的除法结果。参数 a 的默认值为 100，参数 b 的默认值为 50。无论何时您想要传递任何参数或传递未定义的参数，参数都将使用其默认值进行初始化，您可以从输出中打印的值中观察到这一点。

<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 参数

当需要传递给函数的参数数量不固定时，可以使用 rest 参数。JavaScript rest 参数允许我们将所有剩余（rest）参数收集到一个数组中。rest 参数由三个点 (...) 后跟一个参数表示。这里此参数在函数内部充当数组。

语法

请遵循以下语法在函数声明中使用 rest 参数。

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

在上述语法中，'args' 是 rest 参数，所有剩余的参数都将存储在名为 args 的数组中。

示例

在下面的示例中，sum() 函数返回作为参数传递的所有值的总和。我们可以将任意数量的参数传递给 sum() 函数。函数定义将收集所有参数到 'nums' 数组中。之后，我们可以在函数体中遍历 'nums' 数组并计算所有参数值的总和。

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

<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

注意 - 您应该始终将 rest 参数用作最后一个参数。

JavaScript 解构或命名参数

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

语法

请遵循以下语法在函数中使用解构参数。

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

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

示例

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

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

<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

以上三个概念使我们能够灵活地传递函数参数。

打印页面