数据结构
网络
关系型数据库管理系统
操作系统
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属性检查传递的参数总数，并根据该总数为参数分配值。
<!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+ 浏览量
