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

以上三個概念使我們能夠靈活地傳遞函式引數。

列印頁面