如何在 JavaScript 中宣告可選函式引數?


本教程將教我們如何在 JavaScript 中宣告**可選函式引數**。在宣告函式時,我們將一些變數傳遞給函式定義以便在函式塊內使用它,這稱為函式引數。函式引數也可以是**可選的**,這使我們可以獨立地在呼叫函式時傳遞函式引數。這裡,引數是我們呼叫函式時傳遞的值,而引數是我們在函式定義中傳遞的變數。

可選引數

  • 可選引數的意思是,您不需要每次呼叫函式時都傳遞該引數,這使您可以獨立地向函式傳遞較少的引數。

  • 簡單來說,如果我們不傳遞引數,在執行函式時我們仍然不會得到任何引數錯誤,這就是所謂的可選引數。

  • 您可以透過不向函式呼叫傳遞任何引數來使 JavaScript 中**所有引數都可選**。

在 JavaScript 中處理可選函式引數的方法有很多種,我們將分別研究這些方法。

  • 使用引數的預設值
  • 使用 arguments.length 屬性
  • 使用邏輯或運算子(‘||’)

使用引數的預設值

在這種方法中,我們將為引數賦予**預設值**。之後,在呼叫函式時,如果我們沒有為該引數傳遞引數,它會將預設值視為引數值。此外,如果您為特定引數傳遞引數值,它將考慮傳遞的值。

語法

使用者可以按照給定的語法為引數傳遞預設值。

function (parameter_1, parameter_2=default_value, parameter_3=default_value ){
   // parameter_2, and parameter_3 are optional parameters
}

引數

  • **default_value** − 它可以是字串、數字或其他資料型別的任何值。

示例 1

在下面的示例中,使用者可以學習如何為引數傳遞預設值以處理可選引數。

<!DOCTYPE html>
<html>
<body>
   <h2>Declaring optional function parameters by passing Default values.</h2>
   <h4>Result we get when we call function with 4 parameters:</h4>
   <p id="resultDiv1"></p>
   <h4>Result we get when we call function with 2 parameters:</h4>
   <p id="resultDiv2"> </p>
   <script type="text/javascript">
      let resultDiv1 = document.getElementById("resultDiv1");
      let resultDiv2 = document.getElementById("resultDiv2");
      function optionalParameter(contentdiv, num1, num2 = 20, num3 = 10) {
         contentdiv.innerHTML = " The value of <i> num2 </i> is " + num2 + ". The value of <i> num3 </i> is " + num3;
      }
      optionalParameter(resultDiv1, 10, 1000, 4000);
      optionalParameter(resultDiv2, 10);
   </script>
</body>
</html>

在上面的輸出中,使用者可以看到,當我們傳遞 2 個引數時,它對 *num2* 和 *num3* 變數使用預設值,這就是 *num2* 和 *num3* 是可選函式引數的方式。

使用 arguments.length 屬性

在 JavaScript 中,每個函式都有一個名為 arguments 的物件,其中包含引數值。arguments 物件的長度告訴我們傳遞給函式的引數個數。我們將使用 if 和 else 條件為未傳遞的引數賦值。

語法

程式設計師可以按照以下語法使用 arguments.length 屬性。

function( parameter_1, parameter_2, parameter_3 ){
   if(arguments.length == 0){
      // assign value to the all parameter
      } else if(arguments.length == 1){
         // assign value to the last 2 parameter
      } else if(arguments.length == 2){
         // assign value to the last parameter
      }
   }

示例 2

在下面的示例中,使用者可以學習如何使用 *argument.length* 屬性檢查傳遞的引數總數,並根據 arguments 物件的長度為引數賦值。

<!DOCTYPE html>
<html>
<body>
   <h2>Declaring optional function parameters by using <i>arguments.length</i> property.</h2>
   <p>Result we get when we call function with 2 parameters:</p>
   <p id="resultDiv1"></p>
   <p>Result we get when we call function with 1 parameter:</p>
   <p id="resultDiv2"> </p>
   <p>Result we get when we call function with no parameter:</p>
   <p id="resultDiv3"> </p>
   <script type="text/javascript">
      let contentDiv1 = document.getElementById("resultDiv1");
      let contentDiv2 = document.getElementById("resultDiv2");
      let contentDiv3 = document.getElementById("resultDiv3");
      function optionalParameter( num1, num2) {
         if (arguments.length === 0) {
            num1 = 20;
            num2 = 40;
         } else if (arguments.length == 1) {
            num2 = 50;
         }
         return num1*num2;
      }
      contentDiv1.innerHTML = optionalParameter(5, 15);
      contentDiv2.innerHTML = optionalParameter(30);
      contentDiv3.innerHTML = optionalParameter();
   </script>
</body>
</html>

在上面的輸出中,使用者可以看到,當我們使用不同數量的引數呼叫函式時,它會根據 arguments 物件的長度相應地為引數設定值。

使用邏輯或運算子(‘||’)

邏輯**或**運算子從第一個值讀取值並將第一個已定義的值賦給變數。如果未為任何引數傳遞函式引數,則它應該未定義,並且**或**運算子將第二個值賦給變數。

語法

按照以下語法使用或運算子處理可選引數。

function(parameter_1, parameter_2, parameter_3) {
   let var1=parameter_1 || default_value;
}

引數

  • **default_value** − 當未傳遞特定引數的引數時,我們可以考慮任何值。

示例 3

在下面的示例中,使用者可以學習如何使用邏輯或運算子來處理可選引數。

<!DOCTYPE html>
<html >
<body>
   <h2>Declaring the optional function parameters using logical OR.</h2>
   <h4>Result we get when we call function with 1 parameter only:</h4>
   <p id="contentDiv1"> </p>
   <h4>Result we get when we call function with 2 parameters:</h4>
   <p id="contentDiv2"> </p>
   <script>
      let contentDiv1 = document.getElementById("contentDiv1");
      let contentDiv2 = document.getElementById("contentDiv2");
      function optionalParameter(contentdiv, param1, param2) {
         let var1 = param1 || "tutorialsPoint";
         let var2 = param2 || 20;
         contentdiv.innerHTML = "The value of param1 is " + var1 + ". The value of param2 is " + var2;
      }
      optionalParameter(contentDiv1);
      optionalParameter(contentDiv2, 100101);
   </script>
</body>
</html>

在上面的輸出中,使用者可以看到,當我們只傳遞單個引數時,它使用邏輯或運算子為兩個引數都取預設值。當我們向函式呼叫傳遞兩個引數時,它只為最後一個引數取預設值。

更新於:2022年7月12日

10K+ 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告