JavaScript - 展開運算符：簡化代碼的神奇點點

你好，未來的JavaScript大師們！今天，我們將深入探索現代JavaScript中最多才多藝且強大的特性之一：展開運算符。如果你之前從未聽說過它，別擔心——到了這堂課結束時，你將會像專家一樣使用它！ ?

什麼是展開運算符？

我們從基礎開始。展開運算符由三個小點（...）表示。沒錯，就是三個點可以做到很多事！它就像一根魔杖，能夠解包數組、對象或函數參數中的元素。

想像你有一盒巧克力（好吃！）。展開運算符就像打開那盒巧克力，並將所有巧克力個個擺出來。每個巧克力現在都是獨立的，但它們來自同一盒。

這裡有一個簡單的例子：

const chocolateBox = ['dark', 'milk', 'white'];
console.log(...chocolateBox);

輸出：

dark milk white

在這個例子中，...chocolateBox 將數組中的所有元素展開。就像我們寫了一樣：

console.log('dark', 'milk', 'white');

很棒，對吧？但這只是開始。讓我們探索展開運算符的更多強大用途！

使用展開運算符串連數組

展開運算符最常見的用途之一是結合數組。這就像將兩盒不同的巧克力混合在一起，創造出你的夢想選擇！

const fruitBasket1 = ['apple', 'banana'];
const fruitBasket2 = ['orange', 'pear'];
const combinedBasket = [...fruitBasket1, ...fruitBasket2];

console.log(combinedBasket);

輸出：

['apple', 'banana', 'orange', 'pear']

在這裡，我們創造了一個新數組 combinedBasket，它包含了 fruitBasket1 和 fruitBasket2 中的所有元素。展開運算符解包了每個數組，我們最終得到了一個包含所有水果的單一數組。

但還有更多！我們在結合時也可以添加新元素：

const superBasket = ['grape', ...fruitBasket1, 'kiwi', ...fruitBasket2, 'mango'];
console.log(superBasket);

輸出：

['grape', 'apple', 'banana', 'kiwi', 'orange', 'pear', 'mango']

在這個例子中，我們在開頭添加了 'grape'，在中间添加了 'kiwi'，在結尾添加了 'mango'。展開運算符讓我們可以準確地将數組插入我們想要的位置。

使用展開運算符克隆數組

展開運算符的另一個非常实用的應用是創建數組的副本。這就像複印你的作業（但孩子們，在學校不要這麼做！?）。

const originalArray = [1, 2, 3, 4, 5];
const clonedArray = [...originalArray];

console.log(clonedArray);

輸出：

[1, 2, 3, 4, 5]

這創造了一個全新的數組 clonedArray，包含了與 originalArray 相同的元素。最棒的是？對 clonedArray 的更改不會影響 originalArray，反之亦然。它們是獨立的副本！

讓我們來證明一下：

clonedArray.push(6);
console.log('Original:', originalArray);
console.log('Cloned:', clonedArray);

輸出：

Original: [1, 2, 3, 4, 5]
Cloned: [1, 2, 3, 4, 5, 6]

看見了嗎？原始數組保持不變，而我們修改了克隆的數組。

使用展開運算符串連對象

展開運算符不僅僅對數組有效——它對對象也有奇效！這就像將兩個不同的食譜混合在一起，創造出一個超級食譜。

const person = { name: 'Alice', age: 25 };
const job = { title: 'Developer', company: 'Tech Co.' };

const employeeProfile = { ...person, ...job };
console.log(employeeProfile);

輸出：

{name: 'Alice', age: 25, title: 'Developer', company: 'Tech Co.'}

在這裡，我們將 person 和 job 對象結合成了一個單一的 employeeProfile 對象。現在所有的屬性都在一個地方！

就像數組一樣，我們也可以添加或覆蓋屬性：

const updatedProfile = { ...employeeProfile, age: 26, location: 'New York' };
console.log(updatedProfile);

輸出：

{name: 'Alice', age: 26, title: 'Developer', company: 'Tech Co.', location: 'New York'}

在這個例子中，我們更新了Alice的年齡並添加了新的屬性 location。

函數的剩餘參數

最後但同樣重要的是，讓我們來討論一下展開運算符在函數參數中的使用。在這種情況下，它實際上被稱為剩餘參數，但它使用同樣的 ... 語法。

剩餘參數讓函數能夠接受任意數量的參數作為一個數組。這就像有一個神奇的袋子，可以裝滿你想要放入的任何物品！

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

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

輸出：

6
15

在這個例子中，...numbers 將傳遞給 sum 函數的所有參數收集到一個數組中。然後我們使用 reduce 方法來累加所有的數字。這個函數現在可以接受任意數量的參數！

這裡有一個更實際的例子：

function introducePeople(greeting, ...names) {
names.forEach(name => console.log(`${greeting}, ${name}!`));
}

introducePeople('Hello', 'Alice', 'Bob', 'Charlie');

輸出：

Hello, Alice!
Hello, Bob!
Hello, Charlie!

在這個函數中，第一個參數被分配給 greeting，所有其餘的參數都被收集到 names 數組中。

展開運算符方法的總結

這裡是一個我們已經討論過的方法的快速參考表：

方法	描述	示例
數組串連	結合兩個或更多數組	[...array1, ...array2]
數組克隆	創建數組的淺副本	[...originalArray]
對象串連	結合兩個或多個對象	{...object1, ...object2}
函數參數	將數組展開為獨立參數	myFunction(...args)
剩餘參數	將多個參數收集到數組中	function(...args) {}

這就是全部了！你剛剛學會了現代JavaScript中最強大和最靈活的特性之一。展開運算符可能看起來很小——只是三個小點——但它可以讓你的代碼更乾淨、更易讀、更高效。

記住，熟練才能精通。嘗試在你的代碼中使用展開運算符，試著與它一起實驗，很快你會想知道沒有它你怎麼生活。快樂編程，願你的代碼總是順利展開！??‍??‍?

Credits: Image by storyset