JavaScript ES6 展開運算符（Spread Operator）介紹：給新手的指南

更新日期： 2024 年 10 月 23 日

在 JavaScript ES6（ECMAScript 6）中，展開運算符（Spread Operator）是一個非常實用的語法功能，它用來展開可迭代的物件（例如陣列或字串），讓代碼變得更加簡潔。

這篇文章將介紹展開運算符的基本用法，並且展示它如何應用於陣列、物件及函數的處理。

什麼是展開運算符？

展開運算符（…）是用來將一個可迭代的物件（如陣列、字串、物件等）展開成單獨的元素。

它的符號就是三個點 ...。這個運算符可以讓我們非常方便地複製、合併或展開數據結構。

用法一：展開陣列

最常見的展開運算符用法就是展開陣列。

假設我們有兩個陣列，並且想將它們合併到一起，在 ES6 之前，我們可能會使用 concat() 方法，但使用展開運算符可以讓這個過程變得更加簡潔：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// 使用展開運算符合併陣列
const mergedArray = [...arr1, ...arr2];

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

在這個例子中，...arr1 和 ...arr2 將各自的陣列展開為單獨的元素，然後合併成一個新陣列。

用法二：複製陣列

展開運算符還可以用來快速複製一個陣列，而不影響原本的陣列（淺拷貝）。這在處理不可變數據時非常有用，例如在 React 開發中：

const originalArray = [1, 2, 3];

// 使用展開運算符複製陣列
const copiedArray = [...originalArray];

// 修改新陣列，不影響原陣列
copiedArray.push(4);

console.log(originalArray);
// [1, 2, 3]
console.log(copiedArray);
// [1, 2, 3, 4]

在這裡，我們用展開運算符創建了一個新的 copiedArray，它與原來的 originalArray 是獨立的，這意味著改變 copiedArray 不會影響 originalArray。

用法三：展開物件

除了陣列外，展開運算符也可以用於物件。這在 ES2018 中被引入，允許我們展開物件的屬性並進行淺拷貝或合併：

const person = { name: 'Alice', age: 25 };

// 使用展開運算符複製物件
const copiedPerson = { ...person };

console.log(copiedPerson);
// { name: 'Alice', age: 25 }

我們還可以用展開運算符合併物件，並覆蓋某些屬性：

const person = { name: 'Alice', age: 25 };
const updatedPerson = { ...person, age: 26, city: 'Taipei' };

console.log(updatedPerson);
// { name: 'Alice', age: 26, city: 'Taipei' }

在這個例子中，age 屬性被更新為 26，同時我們新增了一個 city 屬性，並保留了原來的 name 屬性。

用法四：展開函數參數

展開運算符還可以用於函數的參數中，允許我們將陣列的元素作為函數的獨立參數來使用。

這在處理可變參數函數時特別方便：

const numbers = [1, 2, 3];

function sum(a, b, c) {
  return a + b + c;
}

// 使用展開運算符將陣列元素作為參數傳遞
const result = sum(...numbers);

console.log(result);
// 6

這種寫法比使用 apply() 更直觀，也能使代碼更容易理解。

用法五：展開字串

展開運算符同樣可以應用於字串，將字串中的每個字元展開為單獨的元素：

const str = 'hello';

// 使用展開運算符將字串轉為陣列
const charArray = [...str];

console.log(charArray);
// ['h', 'e', 'l', 'l', 'o']

這讓我們可以輕鬆地將字串轉換為一個陣列，並對其進行各種操作。

展開運算符與剩餘參數（Rest Parameters）

展開運算符與剩餘參數（Rest Parameters）用的是相同的 ... 符號，但功能不同。

展開運算符是用來展開數據結構，而剩餘參數則是用來將多個參數收集為一個陣列。

例如：

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

console.log(sum(1, 2, 3, 4)); 
// 10

在這裡，...args 將所有傳遞進來的參數收集到一個陣列中，然後我們使用 reduce() 來計算它們的總和。

結論

展開運算符（Spread Operator）是 ES6 中一個非常強大且實用的語法，它能讓我們在處理陣列、物件和函數參數時更簡潔地編寫代碼。

無論是複製數據、合併數據，還是展開參數，展開運算符都能大幅提升代碼的可讀性和效率。

希望這篇文章能幫助你理解並開始使用展開運算符來編寫更簡潔、高效的 JavaScript 代碼！

多加練習，展開運算符將成為你寫代碼時的好幫手。