如何在 JavaScript 函数中使用无限参数？

在本教程中，我们将讨论在JavaScript 函数中使用无限参数的方法。

JavaScript 函数中的参数数量有点棘手。如果我们指定三个参数，则应遵循正确的参数顺序。让我们通过介绍在函数中传递无限参数的方法来发现这个问题的解决方案，我们不能传递超过三个参数。此外，我们无法向 JavaScript 函数传递更多参数。

使用 ES5 Arguments 对象

我们可以通过处理 arguments 对象及其参数总数来处理 arguments 对象，而无需将其转换为数组。

请按照以下语法使用此方法。

语法

function add(args1, args2)
{
   var actualArgs = add.length;
   var totArgs = arguments.length;
   var argObj = add.arguments;
}
add(1,2,3)

语法片段描述了实际的函数参数和参数总数。在这个代码片段中，实际参数有两个，而实际参数则有三个。

参数

  • args1 − 第一个参数。

  • args2 − 第二个参数。

示例

在此示例中，我们定义了一个具有三个参数的函数。然后，我们将七个参数传递给函数。该函数通过处理 arguments 对象来显示参数总数。

<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>

在本教程中，我们学习了在函数中使用多个参数的两种方法。第一种方法使用扩展运算符，第二种方法使用 arguments 对象。扩展运算符方法比较容易，因为我们需要编写更多代码来处理 arguments 对象。

更新于：2022年10月31日

2K+ 次查看

启动您的 职业生涯

通过完成课程获得认证

开始学习
广告