JavaScript Spread Operator 詳細解說

你有沒有遇過需要快速合併兩個物件或是把一個陣列的元素當作函數參數來傳遞的情況？在 JavaScript 裡面，這些工作可以變得非常簡單，這都要歸功於 ES6 引入的 spread operator，也就是 ... 符號。這篇文章會帶你深入了解 spread operator 的用途，以及它如何提升我們的程式碼可讀性和效率。

什麼是 Spread Operator？

Spread operator 是一個看起來很簡單的語法 ...，但它卻能帶來許多方便和強大的功能。這個運算子可以將一個可迭代物件（如陣列、字串、物件）展開成個別的元素，這樣我們就能輕鬆地處理合併、複製或是傳遞參數等操作。

Spread Operator 的基本用途

1. 複製物件

你可能常常需要複製一個物件，但不想改動原本的物件。這時候，spread operator 就能派上用場。

const original = { a: 1, b: 2 };
const copy = { ...original };

console.log(copy); // { a: 1, b: 2 }

2. 合併物件

需要將兩個或多個物件合併成一個新物件？spread operator 可以輕鬆解決這個問題。

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const merged = { ...obj1, ...obj2 };

console.log(merged); // { a: 1, b: 2, c: 3, d: 4 }

3. 複製陣列

類似於物件，我們也可以使用 spread operator 來複製陣列。

const originalArray = [1, 2, 3];
const copyArray = [...originalArray];

console.log(copyArray); // [1, 2, 3]

4. 合併陣列

將多個陣列合併成一個新陣列也是常見的需求。

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = [...array1, ...array2];

console.log(mergedArray); // [1, 2, 3, 4, 5, 6]

5. 傳遞函數參數

spread operator 讓我們可以將一個陣列的元素當作個別參數傳遞給函數。

const numbers = [1, 2, 3];
const sum = (a, b, c) => a + b + c;

console.log(sum(...numbers)); // 6

進階應用

1. 解構賦值

spread operator 可以用來搭配解構賦值，簡化操作。

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 }

2. 陣列拼接

在不使用 concat 方法的情況下，拼接陣列變得非常簡單。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const result = [...arr1, ...arr2];
console.log(result); // [1, 2, 3, 4, 5, 6]

3. 函數參數

spread operator 可以在函數呼叫時展開陣列元素，非常適合可變長度的參數。

function multiply(a, b, c) {
  return a * b * c;
}

const args = [2, 3, 4];
console.log(multiply(...args)); // 24

4. 展開字串

字串也是可迭代物件，因此可以使用 spread operator 展開成個別字符。

const str = "Hello";
const chars = [...str];
console.log(chars); // ['H', 'e', 'l', 'l', 'o']

5. 合併設定

在 React 中，常常需要合併元件的設定，spread operator 讓這件事變得輕而易舉。

const defaultProps = {
  color: "blue",
  size: "medium",
};

const userProps = {
  size: "large",
  onClick: () => alert("Clicked!"),
};

const props = { ...defaultProps, ...userProps };
console.log(props); // { color: "blue", size: "large", onClick: [Function: onClick] }

可能的錯誤與陷阱

雖然 spread operator 非常方便，但使用不當也可能導致一些陷阱。

1. 浅拷贝問題

spread operator 進行的是淺拷貝，深層的物件還是會引用原本的記憶體地址。

const original = { a: 1, b: { c: 2 } };
const copy = { ...original };

copy.b.c = 3;
console.log(original.b.c); // 3

2. 重複鍵值

在合併物件時，如果有重複的鍵值，後面的值會覆蓋前面的值。

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 };

console.log(merged); // { a: 1, b: 3, c: 4 }

結論

spread operator 是 JavaScript ES6 中一個非常強大且實用的工具。它可以讓我們的程式碼更加簡潔、易讀，同時也提高了開發效率。無論是複製、合併物件和陣列，還是傳遞函數參數，spread operator 都能讓這些操作變得更加直觀和簡單。希望這篇文章能幫助你更好地理解和使用 spread operator，讓你的 JavaScript 程式碼更加精彩！

功能範例說明
複製物件{ ...original }複製一個物件
合併物件{ ...obj1, ...obj2 }合併多個物件
複製陣列[...originalArray]複製一個陣列
合併陣列[...array1, ...array2]合併多個陣列
傳遞函數參數sum(...numbers)將陣列元素展開作為函數參數
解構賦值{ a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 }解構賦值並展開剩餘屬性
陣列拼接[...arr1, ...arr2]拼接多個陣列
展開字串[...str]將字串展開為字符陣列
合併設定{ ...defaultProps, ...userProps }合併元件設定

希望這篇文章能讓你對 JavaScript 的 spread operator 有更深入的了解，並能在實際開發中靈活運用這個強大的工具！