9.1 Spread (展開運算符)
在 JavaScript 中，rest 和 spread 操作為對陣列、物件和函數的操作提供了豐富的可能性。 這些操作可以簡化程式碼，使其更具表達力和靈活性。在這次課程中，我們將詳細介紹 rest 和 spread 的基本概念，以及它們的使用例子。
spread (...) 運算符允許在期望零個或多個元素的地方「展開」陣列和物件。 這在複製、合併陣列或物件，以及傳遞函數的參數時非常有用。
範例 1: 複製陣列
在這個範例中，copiedArray 是 originalArray 的副本。
此處運算符 … 將陣列展開為變數列表，而運算符 [] 將變數集合打包成新陣列：
const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];
console.log(copiedArray); // 輸出: [1, 2, 3]
範例 2: 合併陣列
在這個範例中，兩個陣列 array1 和 array2 被合併成一個陣列 combinedArray。
此處運算符 … 將兩個陣列展開為變數列表，而運算符 [] 將變數集合打包成新陣列：
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2];
console.log(combinedArray); // 輸出: [1, 2, 3, 4, 5, 6]
範例 3: 傳遞函數參數
在這個範例中，陣列 numbers 被展開成三個參數傳遞給函數 sum()：
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 輸出: 6
範例 4: 複製物件
在這個範例中，copiedObject 是 originalObject 的副本：
const originalObject = { a: 1, b: 2 };
const copiedObject = { ...originalObject };
console.log(copiedObject); // 輸出: { a: 1, b: 2 }
範例 5: 合併物件
在這個範例中，兩個物件 obj1 和 obj2 被合併成一個物件 combinedObject：
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObject = { ...obj1, ...obj2 };
console.log(combinedObject); // 輸出: { a: 1, b: 2, c: 3, d: 4 }
9.2 Rest (剩餘參數運算符)
rest (...) 運算符允許將多個元素 收集到一個陣列中。 這在處理接受不定數量參數的函數，或是在陣列與物件的解構賦值時特別有用。
範例 1: 函數中的剩餘參數
在這個範例中，函數 sum() 接受任意數量的參數並將它們相加：
function sum(...numbers) {
return numbers.reduce((acc, num) => acc + num, 0);
}
console.log(sum(1, 2, 3)); // 輸出: 6
console.log(sum(4, 5, 6, 7)); // 輸出: 22
範例 2: 使用 rest 進行陣列解構
在這個範例中，陣列的前兩個元素被賦值給變數 first 和 second， 其餘的元素被收集到陣列 rest 中：
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 輸出: 1
console.log(second); // 輸出: 2
console.log(rest); // 輸出: [3, 4, 5]
範例 3: 使用 rest 進行物件解構
在這個範例中，屬性 a 和 b 被提取到單獨的變數中，其餘的屬性被收集到物件 rest 中：
const { a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a); // 輸出: 1
console.log(b); // 輸出: 2
console.log(rest); // 輸出: { c: 3, d: 4 }
9.3 在實際應用中的 rest 和 spread
範例 1: 帶條件的陣列合併
在這個範例中，使用者設置 userSettings 會覆蓋預設設置 defaultSettings 的值：
const defaultSettings = { theme: 'dark', showNotifications: true };
const userSettings = { showNotifications: false, fontSize: 14 };
const settings = { ...defaultSettings, ...userSettings };
console.log(settings); // 輸出: { theme: 'dark', showNotifications: false, fontSize: 14 }
範例 2: 將陣列分成幾部分
在這個範例中，陣列 numbers 在提取前兩個元素後被分成兩部分：
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const [first, second, ...rest] = numbers;
const firstHalf = rest.slice(0, Math.floor(rest.length / 2));
const secondHalf = rest.slice(Math.floor(rest.length / 2));
console.log(firstHalf); // 輸出: [3, 4, 5, 6]
console.log(secondHalf); // 輸出: [7, 8, 9, 10]
GO TO FULL VERSION