rest參數

Rest 參數（Rest Parameters）是 ES6 引入的一個非常實用的特性。它允許函數接受不定數量的參數，并將這些參數作為一個數組存儲，從而簡化了處理可變參數的代碼。

Rest 參數語法

Rest 參數使用 … 語法，緊跟著參數名。它會將傳遞給函數的所有剩余參數收集成一個數組。

function sum(...numbers) {return numbers.reduce((total, num) => total + num, 0);
}console.log(sum(1, 2, 3));  // 輸出：6
console.log(sum(10, 20, 30, 40)); // 輸出：100

在這個例子中，…numbers 捕獲所有傳遞給 sum 函數的參數，并將它們作為數組 numbers 處理。

Rest 參數的特點

只能是最后一個參數

Rest 參數必須是函數參數列表中的最后一個參數。如果在其他參數后使用 …，會拋出語法錯誤。

// 正確
function greet(message, ...names) {console.log(message);console.log(names);
}// 錯誤
function greet(...names, message) {  // 報錯console.log(names);console.log(message);
}

能夠接收任意數量的參數

Rest 參數允許函數接收任意數量的傳遞參數，并將它們收集到一個數組中。即使沒有傳遞任何參數，Rest 參數仍然是一個空數組。

function logMessages(...messages) {console.log(messages);  // 輸出參數數組
}logMessages("Hello", "World");  // 輸出：["Hello", "World"]
logMessages();                 // 輸出：[]

與普通參數一起使用

Rest 參數可以與普通的命名參數一起使用，但它必須位于參數列表的最后。

function displayInfo(name, age, ...hobbies) {console.log(`Name: ${name}`);console.log(`Age: ${age}`);console.log(`Hobbies: ${hobbies.join(", ")}`);
}displayInfo("Alice", 30, "Reading", "Hiking", "Cooking");  
// 輸出：
// Name: Alice
// Age: 30
// Hobbies: Reading, Hiking, Cooking

Rest 參數與 arguments 對象的區別

arguments 對象是一個類數組對象，表示傳遞給函數的所有參數。然而，arguments 對象不是真正的數組，不能直接使用數組的方法（如 forEach、map、filter）。此外，arguments 是一個在所有函數中都存在的對象，并不支持解構。

與此不同，Rest 參數是一個真正的數組，可以直接使用數組的方法。

function test() {console.log(arguments);  // 類數組對象console.log(Array.isArray(arguments));  // 輸出：false
}function testRest(...args) {console.log(args);  // 數組console.log(Array.isArray(args));  // 輸出：true
}test(1, 2, 3);
testRest(1, 2, 3);

Rest 參數與解構結合

你還可以將 Rest 參數與解構語法結合使用，從而靈活地提取函數參數。

function splitData(first, second, ...rest) {console.log(first);  // 輸出：1console.log(second); // 輸出：2console.log(rest);   // 輸出：[3, 4, 5, 6]
}splitData(1, 2, 3, 4, 5, 6);

結論

Rest 參數是一個非常強大的特性，能夠使函數更靈活，支持處理不定數量的參數。它比 arguments 對象更易用，因為它是一個真正的數組，并且可以結合解構語法進行更靈活的處理。使用 Rest 參數，你可以避免處理大量的條件判斷，使代碼更加簡潔和易讀。

擴展運算符

擴展運算符（Spread Operator）是 ES6 引入的一種語法，它使用 … 表示符，可以展開數組或對象的元素。它與 Rest 參數（…）看起來相似，但用途和語境有所不同。

擴展運算符的基本語法

擴展運算符用于將一個數組或對象的元素“展開”成單個值，可以更簡潔地進行合并、克隆等操作。

// 數組的擴展
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];console.log(arr2);  // 輸出：[1, 2, 3, 4, 5]// 對象的擴展
const obj1 = { name: "Alice", age: 25 };
const obj2 = { ...obj1, city: "New York" };console.log(obj2);  // 輸出：{ name: "Alice", age: 25, city: "New York" }

數組的擴展運算符

擴展運算符可以將數組展開為單個元素，常見的用途包括合并數組和克隆數組。

合并數組

你可以使用擴展運算符將多個數組合并成一個新的數組。

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

克隆數組

使用擴展運算符可以快速克隆一個數組。它會展開原數組的所有元素，生成一個新數組。

const arr1 = [1, 2, 3];
const arr2 = [...arr1];console.log(arr2);  // 輸出：[1, 2, 3]
arr1[0] = 100;
console.log(arr1);  // 輸出：[100, 2, 3]
console.log(arr2);  // 輸出：[1, 2, 3]  （原數組未改變）

傳遞數組元素作為函數參數

你可以使用擴展運算符將數組的元素傳遞給函數參數。

const arr = [1, 2, 3];
function sum(a, b, c) {return a + b + c;
}
console.log(sum(...arr));  // 輸出：6

對象的擴展運算符

擴展運算符也可以用于對象，它用于淺拷貝對象或合并多個對象。

克隆對象

擴展運算符可以創建一個對象的淺拷貝，復制對象的所有可枚舉屬性。

const obj1 = { name: "Alice", age: 25 };
const obj2 = { ...obj1 };console.log(obj2);  // 輸出：{ name: "Alice", age: 25 }
obj1.age = 26;
console.log(obj1);  // 輸出：{ name: "Alice", age: 26 }
console.log(obj2);  // 輸出：{ name: "Alice", age: 25 }  （淺拷貝，原對象不受影響）

合并對象

多個對象可以使用擴展運算符合并成一個新對象。如果多個對象有相同的鍵，后面的對象的值會覆蓋前面的。

const obj1 = { name: "Alice" };
const obj2 = { age: 25 };
const obj3 = { city: "New York" };const mergedObj = { ...obj1, ...obj2, ...obj3 };
console.log(mergedObj);  // 輸出：{ name: "Alice", age: 25, city: "New York" }

如果鍵重復，后面的對象會覆蓋前面的對象中的同名屬性：

const obj1 = { name: "Alice", age: 25 };
const obj2 = { age: 26, city: "New York" };const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj);  // 輸出：{ name: "Alice", age: 26, city: "New York" }

合并數組對象

擴展運算符不僅可以用于合并簡單對象，也可以用于合并數組中對象的屬性。

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const obj3 = { ...obj1, ...obj2 };console.log(obj3);  // 輸出：{ a: 1, b: 3, c: 4 }

擴展運算符與 concat 的比較

擴展運算符和 concat 方法都可以用來合并數組，但它們有不同的使用方式和行為：

const arr1 = [1, 2];
const arr2 = [3, 4];// 使用 concat 合并
const combinedArr1 = arr1.concat(arr2);
console.log(combinedArr1);  // 輸出：[1, 2, 3, 4]// 使用擴展運算符合并
const combinedArr2 = [...arr1, ...arr2];
console.log(combinedArr2);  // 輸出：[1, 2, 3, 4]

雖然兩者都可以實現相同的效果，擴展運算符語法更加簡潔易讀。

擴展運算符的應用場景

• 數組克隆與合并：可以快速復制數組或合并多個數組。
• 對象合并與拷貝：適用于對象的淺拷貝和合并多個對象。
• 簡化函數參數傳遞：可以將數組展開為函數參數列表，避免使用 apply()。

結論

擴展運算符（…）是 ES6 中的一個非常強大且簡潔的語法工具，能夠高效地處理數組和對象的合并、克隆等操作。它不僅使代碼更加簡潔，也提高了可讀性。特別是在處理不定參數和函數調用時，擴展運算符為開發者提供了更簡潔的語法。