在 JavaScript 開發中，對象的復制是一個常見但容易出錯的操作。由于 JavaScript 中對象是通過引用傳遞的，不恰當的復制方式可能導致意想不到的副作用，比如修改復制后的對象意外地影響到原始對象。理解深拷貝和淺拷貝的區別，掌握各種復制技巧，對于編寫可靠、健壯的代碼至關重要。

一、引用類型的特性

在深入探討拷貝方法之前，我們需要理解 JavaScript 中的基本類型和引用類型的區別：

• 基本類型（如 number、string、boolean）：按值存儲和傳遞
• 引用類型（如 object、array、function）：按引用存儲和傳遞

當你將一個對象賦值給另一個變量時，實際上只是復制了指向該對象的引用，而不是對象本身的內容：

const original = { name: "John" };
const copy = original;

copy.name = "Jane";
console.log(original.name); // 輸出: "Jane"

這就是為什么我們需要不同的拷貝策略。

二、淺拷貝 (Shallow Copy)

淺拷貝創建一個新對象，但只復制原始對象第一層屬性的值。如果屬性是基本類型，則復制其值；如果屬性是引用類型，則復制其引用（地址）。

1. 淺拷貝的實現方法

(1) Object.assign()

const original = { name: "John", details: { age: 30 } };
const shallowCopy = Object.assign({}, original);

shallowCopy.name = "Jane"; // 不影響原對象
shallowCopy.details.age = 25; // 影響原對象！

console.log(original.name); // 輸出: "John"
console.log(original.details.age); // 輸出: 25

(2) 展開運算符 (Spread Operator)

const original = { name: "John", details: { age: 30 } };
const shallowCopy = { ...original };

// 行為與 Object.assign() 相同

(3) 數組的淺拷貝方法

// 使用 slice()
const originalArray = [1, 2, { value: 3 }];
const slicedArray = originalArray.slice();

// 使用展開運算符
const spreadArray = [...originalArray];

// 使用 Array.from()
const fromArray = Array.from(originalArray);

// 所有這些方法都只創建淺拷貝
slicedArray[2].value = 100;
console.log(originalArray[2].value); // 輸出: 100

2. 淺拷貝的陷阱

淺拷貝的主要問題是：對于嵌套對象或數組，修改副本中的嵌套結構會影響原始對象。這是因為嵌套對象的引用在原始對象和副本之間是共享的。

三、深拷貝 (Deep Copy)

深拷貝創建一個新對象，并遞歸地復制原始對象的所有嵌套對象，確保副本與原始對象完全獨立。

1. 深拷貝的實現方法

(1) JSON 序列化/反序列化

最簡單（但有局限）的深拷貝方法：

const original = { name: "John", details: { age: 30 } };
const deepCopy = JSON.parse(JSON.stringify(original));

deepCopy.details.age = 25;
console.log(original.details.age); // 輸出: 30，原對象不受影響

局限性：

• 不能復制函數、undefined、Symbol、BigInt
• 不能處理循環引用
• 丟失原型鏈
• 不能正確處理 Date、RegExp、Map、Set 等特殊對象

(2) 遞歸實現深拷貝

這個簡單實現可以應對大多數場景，但在實際項目中，可能需要更完善的版本來處理循環引用、特殊對象類型等情況。

(3) 使用庫

在生產環境中，通常推薦使用經過充分測試的庫來處理深拷貝：

• lodash 的 _.cloneDeep()
• rfdc (Really Fast Deep Clone)
• structuredClone()（新的原生 API）

四、結構化克隆算法 (structuredClone)

structuredClone() 是一個相對較新的全局方法，它實現了結構化克隆算法，可以創建深層次的副本：

優勢：

• 原生 API，無需依賴外部庫
• 可以處理大多數 JavaScript 內置類型
• 支持循環引用
• 性能通常較好

局限性：

• 不能克隆函數
• 不能克隆 DOM 節點
• 不會保留對象的原型鏈

五、性能考量

深拷貝通常比淺拷貝消耗更多資源，特別是對于大型、復雜的數據結構。在選擇拷貝策略時，應考慮以下幾點：

• 數據結構的大小和復雜度
• 性能要求
• 對象的使用方式（是否需要完全獨立的副本）

六、實用技巧

1. 混合拷貝策略

有時，你可能只需要對特定的嵌套屬性進行深拷貝：

2. 不可變數據模式

采用不可變數據模式，而不是直接修改對象：

3. 使用 Object.freeze() 防止修改

注意：Object.freeze() 只凍結對象的第一層屬性。

七、常見陷阱與解決方案

陷阱 1：意外的副作用

解決方案：使用深拷貝或者明確地復制需要修改的嵌套結構。

陷阱 2：過度深拷貝

解決方案：只在必要時使用深拷貝，或者只深拷貝需要修改的部分。

陷阱 3：特殊對象類型

const original = {
date: newDate(),
regex: /pattern/,
func: function() { returntrue; }
};

// JSON 方法會丟失或錯誤轉換這些特殊類型
const copy = JSON.parse(JSON.stringify(original));
console.log(copy.date); // 字符串，而非 Date 對象
console.log(copy.regex); // 空對象 {}
console.log(copy.func); // undefined

解決方案：使用專門的深拷貝庫或自定義函數來處理特殊類型。

八、優秀實踐

(1) 明確需求：首先確定你是否真的需要深拷貝。很多時候，淺拷貝或部分深拷貝就足夠了。

(2) 選擇合適的工具：

• 淺拷貝：Object.assign() 或展開運算符
• 簡單深拷貝：structuredClone() 或 JSON.parse(JSON.stringify())
• 復雜深拷貝：lodash 的 _.cloneDeep() 或自定義遞歸函數

(3) 測試邊緣情況：特別是當處理包含特殊對象類型或循環引用的數據時。

(4) 考慮不可變數據模式：使用不可變數據模式可以減少對深拷貝的需求。

(5) 性能平衡：在深拷貝和性能之間找到平衡點，尤其是在處理大型數據結構時。