JavaScript - 浅拷貝：初學者指南

你好，未來的JavaScript大師！今天，我們將踏上一段令人興奮的旅程，進入JavaScript中的淺拷貝世界。如果你是編程新手，別擔心——我將成為你的友好導遊，一步步解釋一切。所以，來一杯咖啡（或是你喜歡的飲料），我們一起來探索吧！

JavaScript - Shallow Copy

什麼是淺拷貝？

在我們深入淺拷貝的細節之前，讓我們先用一個簡單的比喻來開始。想像你有一幅美麗的畫作，你想複製一幅。你有兩個選擇：

拍攝一幅畫作的照片（淺拷貝）
完全從頭再創造一幅畫作（深拷貝）

在JavaScript中，淺拷貝就像拍攝那張照片。它創建了一個新的對象或數組，但裡面的元素仍然引用原始對象的元素。

淺拷貝如何工作

當你創建一個淺拷貝時：

創建了一個新的對象或數組
拷貝了頂層屬性
嵌套的對象或數組仍然引用原始對象

讓我們通過一些代碼來看看這是怎麼工作的！

// 原始對象
let original = {
name: "Alice",
age: 30,
hobbies: ["reading", "swimming"]
};

// 淺拷貝
let shallowCopy = Object.assign({}, original);

// 修改拷貝
shallowCopy.name = "Bob";
shallowCopy.hobbies.push("coding");

console.log(original);
console.log(shallowCopy);

如果你運行這段代碼，你會看到一些有趣的結果：

{name: "Alice", age: 30, hobbies: ["reading", "swimming", "coding"]}
{name: "Bob", age: 30, hobbies: ["reading", "swimming", "coding"]}

注意，改變name只影響了拷貝，但修改hobbies影響了兩個對象。這就是淺拷貝的精髓！

深拷貝與淺拷貝

現在我們理解了淺拷貝，讓我們來比較一下它的兄弟，深拷貝。

特性	淺拷貝	深拷貝
新對象創建	是	是
拷貝頂層屬性	是	是
拷貝嵌套對象/數組	否（引用原始）	是（創建新拷貝）
性能	更快	更慢
記憶體使用	更少	更多

當使用淺拷貝

淺拷貝在以下情況下很棒：

你只需要修改頂層屬性
性能是一個考慮因素
你想為對象創建一個新的引用

當使用深拷貝

深拷貝在以下情況下更好：

你需要修改嵌套屬性而不影響原始對象
你想要對象的一個完全獨立的拷貝

JavaScript中的淺拷貝示例

讓我們探索一些在JavaScript中創建淺拷貝的常見方法！

1. Object.assign()

let original = { a: 1, b: { c: 2 } };
let copy = Object.assign({}, original);

copy.a = 5;
copy.b.c = 10;

console.log(original); // { a: 1, b: { c: 10 } }
console.log(copy);     // { a: 5, b: { c: 10 } }

這裡，Object.assign()創建了一個淺拷貝。改變a只影響拷貝，但改變b.c會影響兩個對象，因為它是一個嵌套屬性。

2. 展開運算符 (...)

let fruits = ["apple", "banana", ["grape", "orange"]];
let fruitsCopy = [...fruits];

fruitsCopy[0] = "pear";
fruitsCopy[2].push("kiwi");

console.log(fruits);     // ["apple", "banana", ["grape", "orange", "kiwi"]]
console.log(fruitsCopy); // ["pear", "banana", ["grape", "orange", "kiwi"]]

展開運算符創建了一個數組的淺拷貝。修改第一個元素只影響拷貝，但向嵌套數組添加元素會影響兩個。

3. Array.from()

let numbers = [1, 2, [3, 4]];
let numbersCopy = Array.from(numbers);

numbersCopy[0] = 10;
numbersCopy[2].push(5);

console.log(numbers);     // [1, 2, [3, 4, 5]]
console.log(numbersCopy); // [10, 2, [3, 4, 5]]

Array.from()也創建了一個淺拷貝。第一級元素被拷貝，但嵌套數組仍然被引用。

淺拷貝的重要性

你可能會想，“我們為什麼需要淺拷貝？”這個問題問得好！淺拷貝在許多情況下都非常有用：

性能：淺拷貝比深拷貝更快，使用記憶體也更少，對於大型對象或頻繁操作來說是理想的。
不變性：它們幫助在代碼中保持不變性，這對於現代JavaScript框架中的可預測狀態管理至關重要。
避免副作用：淺拷貝允許你修改一個對象而不直接改變原始對象，減少代碼中意外的副作用。
React和Redux：在React和Redux應用中，淺拷貝通常用於觸發重渲染和更新狀態，而不變更原始數據。

這裡有一個現實世界的例子：

function updateUserProfile(user, newName) {
// 創建用戶對象的淺拷貝
let updatedUser = Object.assign({}, user);

// 更新名稱
updatedUser.name = newName;

return updatedUser;
}

let user = {
name: "Alice",
age: 30,
address: {
city: "Wonderland",
street: "Rabbit Hole Lane"
}
};

let updatedUser = updateUserProfile(user, "Alicia");

console.log(user);        // 原始用戶對象未改變
console.log(updatedUser); // 新對象，名稱已更新

在這個例子中，我們更新了用戶的名稱，而不修改原始對象。這是一種在狀態管理中常見的模式，有助於保持數據的完整性。

結論

恭喜你！你剛剛踏出了進入JavaScript淺拷貝世界的第一步。記住，淺拷貝就像拍快照——它們快速且高效，但它們不會捕捉到所有的細節。

在你繼續你的JavaScript旅程時，你會發現許多情況下淺拷貝都很有用。它是你編程工具包中的一個強大工具，尤其是在處理复杂数據結構和狀態管理時。

持續練習，保持好奇心，並不要害怕嘗試。在你意識到之前，你將會像專家一樣創建和操作對象！

快樂編程，願你的拷貝總是如你所願的那麼淺（或深）！?

Credits: Image by storyset