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