如何在 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+ 次查看

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告