在 JavaScript 的現代特性中,剩餘參數(Rest Parameters)和擴展運算符(Spread Operator)是兩個非常實用的語法特性。雖然它們的寫法看起來很像(都使用 ... 語法),但是它們的使用場景和功能是不同的。現在讓我們深入理解這兩個特性。

剩餘參數(Rest Parameters)

基本概念

剩餘參數允許我們將不確定數量的參數表示為一個數組。它使用 ... 語法,必須放在函數參數的最後位置。

基本語法

function functionName(...params) {
    // params 是一個包含所有傳入參數的數組
}

實際應用示例

1. 創建一個可以接受任意數量參數的函數:

const info = (...params) => {
    console.log(...params)  // 這裏使用擴展運算符將參數展開
}

info('Hello', 'World', '!');  // 輸出: Hello World !

2. 實現一個可以求任意數量數字之和的函數:

function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4));  // 輸出: 10
console.log(sum(10, 20));      // 輸出: 30

擴展運算符(Spread Operator)

基本概念

擴展運算符允許在需要多個元素的位置(比如函數調用時的參數列表、數組字面量)展開一個數組或者對象。

常見使用場景

1. 函數調用時展開數組:

const numbers = [1, 2, 3];
console.log(...numbers);  // 輸出: 1 2 3

// 等同於
console.log(1, 2, 3);

2. 合併數組:

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];
console.log(combined);  // 輸出: [1, 2, 3, 4]

3. 複製數組:

const original = [1, 2, 3];
const copy = [...original];

剩餘參數和擴展運算符的區別

雖然兩者使用相同的 ... 語法,但有以下關鍵區別:

最佳實踐

1. 使用剩餘參數替代 arguments 對象

   // 舊方式
   function oldWay() {
    const args = Array.from(arguments);
    // ...
   }
   
   // 現代方式
   function newWay(...args) {
    // args 直接就是數組
   }

2. 結合解構賦值使用

   function process(first, second, ...rest) {
    console.log(first);     // 第一個參數
    console.log(second);    // 第二個參數
    console.log(rest);      // 其餘的參數數組
   }

總結

剩餘參數和擴展運算符是 ES6+ 中非常有用的特性：

• 剩餘參數讓函數定義更靈活,可以處理不定數量的參數
• 擴展運算符讓數組操作更簡潔,代碼更易讀
• 兩者經常配合使用,能夠優雅地處理各種參數傳遞和數組操作場景

合理使用這兩個特性,可以讓我們的代碼更加簡潔優雅,提高開發效率。

參考資料

• MDN Web Docs - Rest parameters
• MDN Web Docs - Spread syntax