JavaScript - 智能函数参数

上一页
下一页

JavaScript 智能函数参数概念是一种使函数适应不同用例的方法。它允许函数在调用它时处理传递给它的不同类型的参数。

在 JavaScript 中，函数是重用代码的重要概念。在许多情况下，我们需要确保函数能够灵活地处理不同的用例。

以下是使用智能参数定义函数的不同方法。

默认函数参数

在 JavaScript 中，使用默认 函数参数 是一种处理未定义的参数值或在函数调用期间未传递给函数的参数的方法。

在下面的代码片段中，我们将参数 a 和 b 的默认值设置为 100 和 50。


function division (a = 100, b = 50) {
	 	// Function body
}

例

在下面的代码中，division（） 函数返回参数 a 和 b 的除法。参数 a 的默认值为 100，参数 b 为 50，每当您要传递任何参数或传递未定义的参数时，参数 initialized 为其默认值，您可以从输出中打印的值中观察到。


<html>
<head>
	 	<title> JavaScript - Default parameters </title>
</head>
<body>
	 	<p id = "output"> </p>
	 	<script>
	 	 	 function division(a = 100, b = 50) {
	 	 	 	 	return a / b;
	 	 	 }
	 	 	 document.getElementById("output").innerHTML =	
		 	 	division(10, 2) + "<br>" +
	 	 	 division(10, undefined) + "<br>" +
	 	 	 division();
	 	 </script>
</body>
</html>

输出

5
0.2
2

JavaScript Rest 参数

当需要传递给函数的参数数量不固定时，可以使用 rest 参数。JavaScript rest 参数允许我们将所有 reaming （rest） 参数收集到一个数组中。rest 参数由三个点 （...） 后跟一个参数表示。在这里，此参数用作函数内的数组。

语法

按照以下语法在函数声明中使用 rest 参数。


function funcName(p1, p2, ...args) {	
	 	 // Function Body;
}

在上面的语法中，args 是 rest 参数，所有剩余的参数都将存储在名为 args 的数组中。

例

在下面的示例中，sum（） 函数返回作为参数传递的所有值的总和。我们可以将未知数量的参数传递给 sum（） 函数。函数定义将收集 'nums' 数组中的所有参数。之后，我们可以遍历函数体中的 'nums' 数组并计算所有参数值的总和。

sum（） 函数也将处理 0 参数。


<html>
<head>
	 	<title> JavaScript - Rest parameters </title>
</head>
<body>
	 	<p id = "demo"> </p>
	 	<script>
	 	 	 function sum(...nums) {
	 	 	 	 	let totalSum = 0;
	 	 	 	 	for (let p = 0; p < nums.length; p++) {
	 	 	 	 	 	 totalSum += nums[p];
	 	 	 	 	}
	 	 	 	 	return totalSum;
	 	 	 }
	 	 	 document.getElementById("demo").innerHTML =	
		 	 	sum(1, 5, 8, 20, 23, 45) + "<br>" +
	 	 	 sum(10, 20, 30) + "<br>" +
	 	 	 sum() + "<br>";
	 	</script>
</body>
</html>

输出

102
60
0

注意 – 您应该始终将 rest 参数用作最后一个参数。

JavaScript 解构或命名参数

您可以将单个对象作为函数参数传递，并在函数定义中解构该对象，以便仅从该对象中获取所需的值。它也被称为命名参数，因为我们根据对象的命名属性获取参数。

语法

按照以下语法将解构参数与函数一起使用。


 function funcName({ prop1, prop2, ... }) { }

在上面的语法中，prop1 和 prop2 是作为函数 funcName 的参数传递的对象的属性。

例

在下面的示例中，我们定义了包含三个属性的 'watch' 对象，并将其传递给 printWatch（） 函数。

printWatch（） 函数解构作为参数传递的对象，并将 'brand' 和 'price' 属性作为参数。这样，您可以忽略 function 参数中不必要的参数。


<html>
<head>
	 	<title> JavaScript - Parameter Destructuring </title>
</head>
<body>
	 	<p id = "output"> </p>
	 	<script>
	 	 	 function printWatch({ brand, price }) {
	 	 	 	 	return "The price of the " + brand + "\'s watch is " + price;
	 	 	 }

	 	 	 const watch = {
		 	 	 	 brand: "Titan",
	 	 	 	 	price: 10000,
	 	 	 	 	currency: "INR",
	 	 	 }
	 	 	 document.getElementById("output").innerHTML = printWatch(watch);
	 	</script>
</body>
</html>

输出

The price of the Titan's watch is 10000

以上三个概念为我们提供了传递函数参数的灵活性。

打印本页
上一页
下一页