JavaScript - 預設引數

預設引數是 JavaScript 中的一個特性，允許您為函式引數指定預設值。預設引數的概念在 ES6 中引入。我們可以用預設值初始化引數。因此，如果函式被呼叫時缺少引數或引數值為 undefined，它將在函式中使用引數的預設值。

在 JavaScript 中，函式引數的預設值為“undefined”。當函式被呼叫時缺少引數時，引數被設定為 'undefined'。未定義的引數值是可以接受的，但可能會產生異常結果。

在 ES6 版本的 JavaScript 之前，我們需要在函式體內部檢查引數值是否為“undefined”。如果是，則需要用正確的值初始化引數。

讓我們透過下面的示例來理解它。

function sum(p, q) {
    return p + q;
}
sum(10, 20); // 30
sum(10); // NaN
sum(); // NaN

在這個例子中，我們觀察到以下內容：

sum(10, 20) 返回兩個引數的和，即 30。這裡傳遞了兩個引數。
sum(10) 返回 NaN。這裡只傳遞了一個引數。第二個引數 q 被設定為 undefined。對 undefined 進行數學運算會返回 NaN。
sum() 也返回 NaN。這裡兩個引數都缺失。所以它們被設定為 undefined。

當我們用缺失的引數值呼叫函式時，它會返回 NaN，這很不尋常。

為了克服這個問題，我們可以使用預設引數值，如果函式被呼叫時缺少引數值，則使用這些值。

預設引數語法

在 JavaScript 中使用函式預設引數的語法如下：

function functName(param1 = defaultValue1, param2 = DefaultValue2, ..) {
    // Use parameters here
}

在上面的語法中，param1 的預設值設定為 defaultValue1，param2 的預設值設定為 defaultValue2。

讓我們看下面的例子：

示例（預設引數）

在下面的程式碼中，引數 p 和 q 分別包含 30 和 40 的預設值。

在輸出中，與第一個示例不同，您可以看到當任何引數缺失時，它會返回預設引數值的和。

<html>
<body>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      function sum(p = 30, q = 40) {
         return p + q;
      }
      output.innerHTML += "sum(10, 20)  ->  " + sum(10, 20) + "<br>"; // 10 + 20 = 30
      output.innerHTML += "sum(10)  ->  " + sum(10) + "<br>"; // 10 + 40 = 50
      output.innerHTML += "sum()  ->  " + sum() + "<br>"; // 30 + 40 = 70
   </script>
</body>
</html>

輸出

sum(10, 20) -> 30
sum(10) -> 50
sum() -> 70

將表示式作為預設引數值傳遞

我們可以將表示式作為預設引數值傳遞給 JavaScript 函式。表示式還可以包含前面引數的值。

示例

我們在下面的程式碼中將表示式作為預設引數值傳遞。表示式包含前面引數的值。

在第二個函式呼叫的輸出中，您可以觀察到 r 的值為 100，它等於 (p = 5) * (q = 10) * 2。在第三個函式呼叫中，我們沒有傳遞任何引數，因此所有引數都採用預設值。

<html>
<body>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      function sum(p = 2, q = p * 2, r = p * q * 2) {
         return p + q + r;
      }
      output.innerHTML += "sum(5, 10, 15)  ->  " + sum(5, 10, 15) + "<br>"; 
      // 5 + 10 + 15 = 30
      output.innerHTML += "sum(5, 10)  ->  " + sum(5, 10) + "<br>"; 
      // 5 + 10 + (5 * 10 * 2) = 115
      output.innerHTML += "sum()  ->  " + sum() + "<br>"; 
      // 2 + 4 + 16 = 22
   </script>
</body>
</html>

輸出

sum(5, 10, 15) -> 30
sum(5, 10) -> 115
sum() -> 22

您不能在表示式中使用未初始化的引數。否則，程式碼將引發引用錯誤。

傳遞 Undefined 引數

當您將 undefined 引數傳遞給函式呼叫時，JavaScript 函式定義將使用預設引數值以避免不必要的錯誤。

<html>
<body>
   <p id="output"> </p>
   <script>
      let output = document.getElementById("output");
      function sum(p = 24, q = 26) {
         return p + q;
      }

      output.innerHTML += "sum(5, undefined)  ->  " +sum(5, undefined)+"<br>"; 
      // 5 + 26 = 31 
      output.innerHTML += "sum(undefined)  ->  " + sum(undefined) + "<br>"; 
      // 24 + 26 = 50
    </script>
</body>
</html>

輸出

sum(5, undefined) -> 31
sum(undefined) -> 50

函式表示式作為預設引數

JavaScript 函式表示式也可以作為函式的預設引數傳遞。

在下面的示例中，getNum() 函式返回 5。我們使用函式表示式作為引數 q 的預設值。

輸出顯示，當第二個引數缺失時，引數使用 getNum() 函式返回的值。

<html>
<body>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      function getNum() {
         return 5;
      }
      function mul(p = 5, q = getNum()) {
         return p * q;
      }

      output.innerHTML += "mul(10)  -> " + mul(10) + "<br/>";
      output.innerHTML += "mul() -> " + mul() + "<br/>";
   </script>
</body>
</html>

輸出

mul(10) -> 50
mul() -> 25

函式可選引數

函式預設引數也稱為可選引數，因為即使我們不傳遞可選引數的引數，函式也會在沒有任何錯誤的情況下輸出結果。

你應該將所有必需引數放在開頭，將可選引數放在函式末尾。

function sum(p, q=10){
   return p+q;
}

在上面的 JavaScript 程式碼片段中，我們將可選引數 q 放置在引數列表的末尾。

示例

下面的 JavaScript 程式碼顯示第一個引數是必需的，第二個引數是可選的。

<html>
<body>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      function func(p, q=10) {
         return p + q;
      }
      output.innerHTML += "func(10, 20) -> " + func(10, 20);
   </script>
</body>
</html>

輸出

func(10, 20) -> 30

如果我們將可選引數放在開頭，在使用未定義值呼叫函式時可能會遇到錯誤。

function sum(p=10, q){
   return p+q;
}
sum(,10) // Error
sum(10) // NaN

因此，如果你只傳遞一個引數，它將替換第一個引數的預設值，而第二個引數將保持未定義。

列印頁面