如何在 JavaScript 函式中設定預設引數值？

在本教程中，我們將學習如何為 JavaScript 函式設定預設引數值。JavaScript 是一種面向物件的程式語言，它允許我們進行函式式和麵向類程式設計，從而使我們能夠輕鬆管理程式碼並重用程式碼。

在函數語言程式設計中，程式設計師建立一個函式，該函式可以接受一些引數，並在執行若干步驟後返回一些值。函式的引數值可以是字串、數字、物件等，我們還可以設定引數的預設值。

這使得處理函式引數更加容易。您可以輕鬆設定預設引數，以便使用預設值初始化形式引數。只有在沒有傳遞值或傳遞 undefined 時才有可能。

語法

現在讓我們來看一下在 JavaScript 函式中設定預設引數值的語法：

//default is set to 1
function setDefaultValue(val1, defaultValue = 1) {
   return val1 + defaultValue;
}

在上文的語法中，我們註釋了“預設值設定為 1”，它定義了第二個引數“defaultValue”的預設值，並使用“function”關鍵字聲明瞭一個名為“setDefaultValue”的函式。在這個函式中，我們傳遞了兩個引數“val1”和“defaultValue”，正如我們所討論的，我們設定了第二個引數的預設值為 1。在函式的最後，我們返回了兩個引數值之和。

演算法

我們已經看到了在 JavaScript 函式中設定預設引數值的語法，現在我們將逐步瞭解完整的步驟：

  • 首先，我們建立一個表單，在表單中建立一個與“display”函式連線的按鈕。

  • 現在，我們必須在 script 標籤中建立一個“setDefaultValue”函式。在這個函式中，我們必須傳遞兩個引數。

  • 現在，我們必須設定“setDefaultValue”函式的第二個引數的預設值。

  • 在“setDefaultValue”函式中，我們必須編寫一個 return 語句，在這個語句中，我們傳遞了兩個引數的和。

  • 此外，在 script 標籤中，我們必須建立另一個與按鈕連線的“display”函式。

  • 在“display”函式中，我們必須編寫“document.write”語句，在這個語句中，我們透過傳遞兩個引數的值（即第一種情況）來呼叫“setDefaultValue”函式。

  • 類似地，對於第二種情況，我們只傳遞了“setDefaultValue”函式的第一個引數的值。

示例

我們已經看到了在 JavaScript 函式中設定預設引數值的語法和演算法，現在讓我們來看一個例子來實現上面討論的步驟。

<html>
<body>
   <form>
      <button type="button" onclick="display()">Click to see the Result</button>
   </form>
   <script>
      // default is set to 1
      function setDefaultValue(val1, defaultValue = 1) {
         return val1 + defaultValue;
      }
      function display(){
         //Here we passed value of both the variable val1 and defaultValue
         document.write(setDefaultValue(10,10));
         document.write("<br>");
         
         //Here we only passed the value of the variable val1
         document.write(setDefaultValue(10));
      }
   </script>
</body>
</html>

在上文的程式碼中，我們首先聲明瞭一個表單，在這個表單中我們建立了一個與名為“display”的函式連線的按鈕，因此當我們單擊此按鈕時，將呼叫 display 函式。此外，在 script 標籤中，我們建立了一個“setDefaultValue”函式，在這個函式中，我們傳遞了兩個引數，並透過簡單地使用“=”並將值賦值為 1 來設定第二個引數的預設值。之後，我們建立了另一個“display”函式，在這個函式中我們使用了“document.write”，並在其中傳遞了帶有引數值的第一個函式。我們在這個例子中有兩種情況。

第一種情況是，我們傳遞了兩個引數的值，即 10, 10，因此“setDefaultValue”函式將第二個引數的值視為 10，並返回兩個引數值之和，即 10+10 = 20，您可以在第二個影像中看到。

第二種情況是，我們只傳遞了第一個引數的值，即 10。“setDefaultValue”函式將第一個引數的值視為 10，而我們沒有傳遞第二個引數的值，此時它將第二個引數的預設值視為 1，並返回引數值之和，即 10+1 = 11，您可以在第二個影像中看到。

結論

在本教程中，我們學習瞭如何在 JavaScript 函式中設定預設引數值。函式的引數值可以是字串、數字、物件等，我們還可以設定引數的預設值。這使得處理函式引數更加容易。您可以輕鬆設定預設引數，以便使用預設值初始化形式引數。只有在沒有傳遞值或傳遞 undefined 時才有可能。

更新於：2022年11月7日

瀏覽量：425

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.