JavaScript - 智能函数参数

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

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

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

默认函数参数

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

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

function division (a = 100, b = 50) {
    // 函数主体
}

示例

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

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

语法

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

function funcName(p1, p2, ...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

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