数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何在 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>在上面的输出中，用户可以看到，当我们只传递单个参数时，它使用逻辑或运算符为两个参数都取默认值。当我们向函数调用传递两个参数时，它只为最后一个参数取默认值。
10K+ 次浏览
