在 JavaScript 中向函式傳遞未知數量的引數

儘管在 JavaScript 中，“函式引數”和“函式的引數”這兩個術語經常被同義使用，但兩者之間存在重大區別。當我們定義函式時，會包含函式引數。在定義函式時，您還可以指定變數列表；這些變數稱為函式引數。另一方面，“函式引數”是我們呼叫或執行新建立的函式時傳遞的值。

在 JavaScript 中，函式宣告中列出的變數充當引數值。當我們建立函式時，會使用作為函式定義一部分的引數。下面提供的語法顯示了可以在括號內放置多少個引數以及如何用逗號分隔它們。

示例 1

無論函式宣告指示什麼，JavaScript 都允許您在呼叫函式時傳遞任意數量的引數。對函式引數長度沒有限制。

在本例中，讓我們透過建立一個接受兩個引數的函式來理解基本示例。任何數量的輸入都將始終產生相同的結果，因為它只接受前兩個引數。

<!DOCTYPE html>
<html>
<title>Passing unknown number of arguments to a function in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
   <body style="text-align:center">
   <script>

      // function with two parameters
      function addPara(x, y) {
         return x + y;
      }
      document.write(addPara(5, 3) +'<br>'); // 8
      document.write(addPara(5, 3, 2)); // 8
   </script>
</body>
</html>

我們必須建立一個可以接受任意數量輸入的函式。我們可以用兩種方法來處理它。

  • arguments 物件 (ES5)
  • 剩餘引數 (ES6)

arguments 物件 (ES5)

示例 2

JavaScript 中所有非箭頭函式都可以訪問名為 arguments 的區域性 JavaScript 物件變數。傳遞給函式的引數值儲存在一個名為 arguments 的類陣列物件中，該物件在函式內部可用。

在本例中，讓我們瞭解如何在 ES5 中編寫一個接受 n 個引數的函式 -

<!DOCTYPE html>
<html>
<title>Passing unknown number of arguments to a function in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>

      // function with n number of parameters
      function addPara() {
         let addNum = 0;
         for (let i = 0; i < arguments.length; i++) {
            addNum += arguments[i];
         }
         return addNum;
      }
      document.write(addPara(5, 10, 15) +'<br>'); // 30
      document.write(addPara(10, 20, 30, 40, 50) +'<br>'); // 150
      document.write(addPara(10, 20, 10, 20)); // 60
   </script>
</body>
</html>

示例 3

在使用 reduce 方法之前，必須使用 Array.from 方法將 arguments 物件轉換為陣列，因為它預設情況下不是陣列。箭頭函式無法處理 arguments 物件。

<!DOCTYPE html>
<html>
<title>Passing unknown number of arguments to a function in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>

      // function with n number of parameters
      function addPara() {
         let arg = Array.from(arguments);
         return arg.reduce(function (acc, cur) {
            return acc + cur;
         })
      }
      document.write(addPara(5, 10, 15) +'<br>'); // 30
      document.write(addPara(10, 20, 30, 40, 50) +'<br>'); // 150
      document.write(addPara(10, 20, 10, 20)); // 60
   </script>
</body>
</html>

剩餘引數 (ES6)

示例 4

為了處理無限數量的引數，剩餘引數提供了一種更簡單、更乾淨的方法。前面的示例現在應該包含一個剩餘引數。我們可以透過使用與擴充套件運算子語法相同的剩餘引數，向我們的函式傳遞無限數量的引數。

<!DOCTYPE html>
<html>
<title>Passing unknown number of arguments to a function in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>

      // using rest parameter in ES6
      function addPara(...args){
         return args.reduce(function (acc, cur) {
            return acc + cur;
         })
      }
      document.write(addPara(5, 10, 5) +'<br>'); // 20
      document.write(addPara(10, 20, 10, 20, 30) +'<br>'); // 90
      document.write(addPara(10, 20, 10, 20)); // 60
   </script>
</body>
</html>

以下是剩餘引數和 arguments 物件之間的區別 -

剩餘引數陣列可以直接與所有陣列方法（如 map、sort 和 filter）一起使用，但 arguments 物件不允許。在對 arguments 物件使用陣列方法之前，必須先將其轉換為真正的陣列。

在函式的使用方式方面，剩餘引數更簡單，並且具有邏輯語法。                               

arguments 物件具有其他獨特的附加功能（如 callee 屬性）。

箭頭函式無法訪問 arguments 物件。

更新於： 2022-08-23

2K+ 次檢視

啟動您的 職業生涯

透過完成課程獲得認證

開始學習
廣告