如何在 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+ 次檢視

啟動您的 職業生涯

透過完成課程獲得認證

開始學習
廣告