如何在 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>在上面的輸出中,使用者可以看到,當我們只傳遞單個引數時,它使用邏輯或運算子為兩個引數都取預設值。當我們向函式呼叫傳遞兩個引數時,它只為最後一個引數取預設值。
資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP