JavaScript - 默认参数

JavaScript 中的默认参数是一项功能，允许您为函数参数指定默认值。默认参数的概念是在 ES6 中引入的。我们可以使用默认值初始化参数。因此，如果调用函数时缺少参数或参数未定义，则它将使用函数中参数的默认值。

在 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 中使用函数 default 参数的语法如下 –


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

不能在表达式中使用 uninitialized 参数。否则，代码将引发引用错误。

传递未定义的参数

当您将 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

功能可选参数

函数默认参数也称为可选参数，因为即使我们不传递可选参数的参数，该函数也会给出任何错误的输出。

您应该在 start 传递所有必需的参数，并在函数 end 传递可选参数。


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

如果我们将 optional 参数放在开头，则在调用具有 undefined 值的函数时可能会遇到错误。


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

因此，如果只传递单个参数，它将替换第一个参数的默认值，而第二个参数保持未定义状态。

打印本页