JavaScript – 其餘引數

其餘引數

JavaScript 中的其餘引數允許函式以陣列的形式接受可變數量的引數。當需要傳遞給函式的引數數量不固定時，可以使用其餘引數。

JavaScript 其餘引數允許您將所有剩餘的引數收集到單個數組中。其餘引數由三個點 (...) 後跟引數名稱表示。此引數名稱是包含所有剩餘引數的陣列。

其餘引數語法

JavaScript 中的其餘引數涉及在函式宣告中使用三個點 (...) 後跟引數名稱。

function functionName(para1, para2, ...theArgs){
   // function body;
}

這裡para1 和 para2 是普通引數，而 theArgs 是其餘引數。其餘引數收集其餘引數（此處，除對應於引數 para1 和 para1 的引數之外的引數），並將其賦值給名為 theArgs 的陣列。

我們也可以在函式表示式中編寫其餘引數，與函式宣告相同。

其餘引數應始終是函式定義中的最後一個引數。

function funcName(...para1, para2, para2){}
// SyntaxError: Invalid or unexpected token

函式定義只能有一個其餘引數。

function funcName(para1, ...para2, ...para3){}
//SyntaxError: Rest parameter must be last formal parameter

示例：可變長度引數列表

當您想要定義一個可以處理可變數量引數的函式時，其餘引數非常有用。讓我們來看下面的例子：

<html>
<body>
  <div> Rest parameter allows function to accept nay number of arguments.</div>
  <div id = "demo"> </div>
  <script>
    function sum(...nums) {
      let totalSum = 0;
      for (let num of nums) {
        totalSum += num;
      }
      return totalSum;
    }
    document.getElementById("demo").innerHTML = 
	 sum(10, 20, 30, 40) + "<br>" +
    sum(10, 20) + "<br>" +
    sum();
  </script>
</body>
</html>

輸出

Rest parameter allows function to accept nay number of arguments.
100
30
0

這裡，其餘引數 nums 允許函式接受任意數量的數字引數。

示例：查詢最大數

JavaScript 其餘引數簡化了在給定的一組數字中查詢最大數的過程。

在這個例子中，我們使用其餘引數 numbers 來收集傳遞給函式的所有引數。展開運算子用於將各個值傳遞給 Math.max() 函式。

<html>
<body>
   <div> Finding the maximum number</div>
   <div id = "demo"> </div>
   <script>
      function getMax(...args){ 
         return Math.max(...args); 
      } 
      document.getElementById("demo").innerHTML = 
		getMax(10,20,30,40) + "<br>" +
      getMax(10,20,30);
  </script>
</body>
</html>

輸出

Finding the maximum number
40
30

這裡其餘引數 args 允許函式 getMax 接受任意數量的引數。

展開運算子和其餘引數

展開運算子 (...) 與其餘引數密切相關，並且經常與它們一起使用。其餘引數將函式引數收集到陣列中，而展開運算子執行相反的操作，將陣列的元素展開為單個引數。

在上面查詢最大數的示例中，我們使用了其餘引數和展開運算子。

function getMax(...args){ // here ...args as rest parameter
    return Math.max(...args); // here ... works as spread operator
}

示例

在這個例子中，展開運算子 ... 用於將 numbers 陣列的元素作為單個引數傳遞給 multiply 函式。

<html>
<body>
   <div> Spread operator in JavaScript<div>
   <div id="demo"></div>
   <script>
      function multiply(a, b, c) {
         return a * b * c;
      }
      const numbers = [2, 3, 4];
      document.getElementById("demo").innerHTML = multiply(...numbers);
   </script>
</body>
</html>

輸出

Spread operator in JavaScript
24

其餘引數與 arguments 物件

其餘引數的引入對我們如何處理可變長度引數列表（與使用 arguments 物件相比）具有影響。讓我們比較這兩種方法

其餘引數

<html>
<body>
  <div> Sum using rest parameter in JavaScript:</div>
  <div id = "demo"> </div>
  <script>
    function sum(...numbers) {
      return numbers.reduce((total, num) => total + num, 0);
    }
    document.getElementById("demo").innerHTML = sum(1, 2, 3, 4, 5);
  </script>
</body>
</html>

輸出

Sum using rest parameter in JavaScript:
15

arguments 物件

<html>
<body>
  <div> Sum using arguments object in JavaScript:</div>
  <div id = "demo"> </div>
  <script>
    function sum() {
      const argsArray = Array.from(arguments);
      return argsArray.reduce((total, num) => total + num, 0);
    }
    document.getElementById("demo").innerHTML = sum(1, 2, 3, 4, 5);
  </script>
</body>
</html>

輸出

Sum using arguments object in JavaScript:
15

雖然這兩種方法都達到了相同的結果，但其餘引數語法更簡潔易讀。它也與其他現代 JavaScript 功能更一致。

使用其餘引數進行解構

解構賦值是在 ES6 中引入的。它允許我們訪問陣列的各個值，而無需使用陣列索引。我們可以使用解構賦值從其餘引數建立的陣列中提取值。

示例

在下面的示例中，解構賦值從 numbers 陣列中提取前兩個元素。

<html>
<body>
  <div> Destructuring assignment with rest parameter</div>
  <div id = "demo"> </div>
  <script>
    function getFirstTwo(...numbers) {
      const [first, second] = numbers;
      return `First: ${first}, Second: ${second}`;
    } 
    document.getElementById("demo").innerHTML = getFirstTwo(1, 2, 3, 4, 5);
  </script>
</body>
</html>

輸出

Destructuring assignment with rest parameter
First: 1, Second: 2

列印頁面