如何在 JavaScript 函数中使用无限参数?
在本教程中，让我们讨论在 JavaScript 函数中使用无限参数的方法。
JavaScript 函数中的 参数 数量有点棘手。如果我们指定三个参数，则应遵循参数的正确顺序。让我们通过介绍在函数中传递无限参数的方法来发现此问题的解决方案，我们不能传递超过三个。此外，我们将参数传递给 JavaScript 函数。
使用 ES5 参数对象
我们可以使用参数总数来处理参数对象，而不是将参数对象转换为数组。
按照以下语法使用此方法。
语法
function add(args1, args2)
{
var actualArgs = add.length;
var totArgs =arguments.length;
var argObj = add.arguments;
}
add(1,2,3)
语法片段描述了实际函数参数和参数总数。实际参数为两个，此代码片段中真实参数为三个。
参数
args1 − 这是第一个参数。
args2 − 这是第二个参数。
示例
在此示例中，我们定义了一个具有三个参数的函数。然后我们将七个参数传递给该函数。该函数通过处理参数对象显示总参数。
<html> <body> <h2>Unlimited function arguments using <i> the arguments object only</i></h2> <div id = "argObjBtnWrap"> <p><b> Input: </b> Violet, Indigo, Blue, Green, Yellow, Orange, Red</p> <p>Click the button to see the details of the arguments</p> <button onclick = 'argFunction("Violet", "Indigo", "Blue", "Green", "Yellow", "Orange", "Red")'>Click Me</button> </div> <div id = "argObj"></div> <script> function argFunction(arg1, arg2, arg3) { var argObjBtnWrap = document.getElementById("argObjBtnWrap"); var argObjOp = document.getElementById("argObj"); var argObjStr = ""; //argObjBtnWrap.style.display = "none"; argObjStr += "Function Argument = " + argFunction.length; argObjStr += " <br> "; argObjStr += "Total Arguments = " + arguments.length; argObjStr += " <br> "; argObjStr += "Arguments are, <br><br>" for (i = 0; i < arguments.length; i++) { argObjStr += argFunction.arguments[i] + " "; } argObj.innerHTML = argObjStr; } </script> </body> </html>
将 ES5 Arguments 对象用作数组
arguments 对象是一种数组，其中包含函数的参数总数。这种方法有两个缺点。因为它不是数组，所以我们不能使用 forEach 和 map 函数。接下来，我们不能使用箭头语法。如果我们需要将其转换为数组，我们需要使用 Array.from() 方法。
语法
function add() {
const argsArr = Array.from(arguments);
return argsArr.reduce((total, current) => total + current);
}
这里，arguments 数组给出了所有参数。reduce 函数和箭头函数将参数相加。
示例
在此示例中，我们执行多个数字的乘法。我们将"arguments"对象转换为一个数组，并使用reduce函数对其进行处理，以执行多个数字的乘法。
<html> <head> <script type = "text/javascript"> function getArgSynt() { var argSyntBtnWrap = document.getElementById("argSyntBtnWrap"); var argSyntOp = document.getElementById("argSynt"); var argSyntStr = ""; function argSyntMult() { const args = Array.from(arguments); return args.reduce((total, current) => total * current); } //argSyntBtnWrap.style.display = "none"; argSyntStr += "100 × 200 = <b>" + argSyntMult(100, 200) + "</b> <br> <br>"; argSyntStr += "100 × 200 × 300 = <b>" + argSyntMult(100, 200, 300) + "</b> <br> <br>"; argSynt.innerHTML = argSyntStr; } </script> </head> <body> <h2>Unlimited function arguments using <i>the arguments object as an array</i></h2> <div id = "argSyntBtnWrap" <p>Product of 100, 200</p> <p>Product of 100, 200, 300</p> <p>Click the button to see the result</p> <button onclick = "getArgSynt()">Click Me</button> </div> <div id = "argSynt"> </div> </body> </html>
使用扩展运算符或剩余参数语法
我们可以使用 ES6 的剩余参数语法来使用无限参数。语法简单易用。它是一个接受多个参数的数组。
语法
以下是使用扩展运算符使用无限参数的语法 -
function f(a, b, ...theArgs) {
// …
}
在这里，我们可以传递多个参数。
参数
a - 这是第一个参数。
b - 这是第二个参数。
theArgs - 它是一个包含所有参数的数组。
示例
在此示例中，我们执行多个数字的求和。我们使用扩展运算符来执行此操作。
<html> <head> <script type = "text/javascript"> function getResOp() { var resOpBtnWrap = document.getElementById("resOpBtnWrap"); var resOp = document.getElementById("resOp"); var resOpStr = ""; function add(...theArgs) { let sum = 0; for (const arg of theArgs) { sum += arg; } return sum; } //resOpBtnWrap.style.display = "none"; resOpStr += "10 + 20 + 30 = <b>" + add(10, 20, 30) + "</b><br><br>"; resOpStr += "10 + 20 + 30 + 40 + 50 = <b>" + add(10, 20, 30, 40, 50) + "</b> <br> <br>"; resOp.innerHTML = resOpStr; } </script> </head> <body> <h2>Unlimited function arguments using <i>the rest parameter syntax</i></h2> <div id = "resOpBtnWrap"> <p>Sum of 10, 20, 30<p> <p>Sum of 10, 20, 30, 40, 50</p> <p>Click the button to see the result</p> <button onclick = "getResOp()">Click Me</button> </div> <div id = "resOp"> </div> </body> </html>
在本教程中，我们学习了在函数中使用多个参数的两种方法。第一种方法使用扩展运算符，第二种方法使用参数对象。扩展运算符方法很简单，因为我们需要编写更多代码来处理参数对象。
