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

一、引用類型的特性

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

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

當(dāng)你將一個(gè)對象賦值給另一個(gè)變量時(shí)，實(shí)際上只是復(fù)制了指向該對象的引用，而不是對象本身的內(nèi)容：

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

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

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

二、淺拷貝 (Shallow Copy)

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

1. 淺拷貝的實(shí)現(xiàn)方法

(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) 展開運(yùn)算符 (Spread Operator)

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

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

(3) 數(shù)組的淺拷貝方法

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

// 使用展開運(yùn)算符
const spreadArray = [...originalArray];

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

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

2. 淺拷貝的陷阱

淺拷貝的主要問題是：對于嵌套對象或數(shù)組，修改副本中的嵌套結(jié)構(gòu)會(huì)影響原始對象。這是因?yàn)榍短讓ο蟮囊迷谠紝ο蠛透北局g是共享的。

三、深拷貝 (Deep Copy)

深拷貝創(chuàng)建一個(gè)新對象，并遞歸地復(fù)制原始對象的所有嵌套對象，確保副本與原始對象完全獨(dú)立。

1. 深拷貝的實(shí)現(xiàn)方法

(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，原對象不受影響

局限性：

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

(2) 遞歸實(shí)現(xiàn)深拷貝

這個(gè)簡單實(shí)現(xiàn)可以應(yīng)對大多數(shù)場景，但在實(shí)際項(xiàng)目中，可能需要更完善的版本來處理循環(huán)引用、特殊對象類型等情況。

(3) 使用庫

在生產(chǎn)環(huán)境中，通常推薦使用經(jīng)過充分測試的庫來處理深拷貝：

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

四、結(jié)構(gòu)化克隆算法 (structuredClone)

structuredClone() 是一個(gè)相對較新的全局方法，它實(shí)現(xiàn)了結(jié)構(gòu)化克隆算法，可以創(chuàng)建深層次的副本：

優(yōu)勢：

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

局限性：

• 不能克隆函數(shù)
• 不能克隆 DOM 節(jié)點(diǎn)
• 不會(huì)保留對象的原型鏈

五、性能考量

深拷貝通常比淺拷貝消耗更多資源，特別是對于大型、復(fù)雜的數(shù)據(jù)結(jié)構(gòu)。在選擇拷貝策略時(shí)，應(yīng)考慮以下幾點(diǎn)：

• 數(shù)據(jù)結(jié)構(gòu)的大小和復(fù)雜度
• 性能要求
• 對象的使用方式（是否需要完全獨(dú)立的副本）

六、實(shí)用技巧

1. 混合拷貝策略

有時(shí)，你可能只需要對特定的嵌套屬性進(jìn)行深拷貝：

2. 不可變數(shù)據(jù)模式

采用不可變數(shù)據(jù)模式，而不是直接修改對象：

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

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

七、常見陷阱與解決方案

陷阱 1：意外的副作用

解決方案：使用深拷貝或者明確地復(fù)制需要修改的嵌套結(jié)構(gòu)。

陷阱 2：過度深拷貝

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

陷阱 3：特殊對象類型

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

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

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

八、優(yōu)秀實(shí)踐

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

(2) 選擇合適的工具：

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

(3) 測試邊緣情況：特別是當(dāng)處理包含特殊對象類型或循環(huán)引用的數(shù)據(jù)時(shí)。

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

(5) 性能平衡：在深拷貝和性能之間找到平衡點(diǎn)，尤其是在處理大型數(shù)據(jù)結(jié)構(gòu)時(shí)。