JavaScript 中的淺複製與深複製

概述

在 JavaScript 中，複製物件或陣列可以分為淺複製和深複製。在處理複雜的資料結構時，尤其是那些包含嵌套物件或陣列的資料結構，理解其中的差異至關重要。

本指南解釋了這些概念、它們的特徵、實現它們的方法以及何時使用它們。

1. 淺拷貝

定義
淺拷貝建立物件或陣列的頂層屬性的副本。但是，對於嵌套物件或數組，僅複製引用，而不複製實際資料。

特點

• 僅複製第一級屬性或元素。
• 巢狀物件或陣列與原始物件/陣列共用參考。
• 輕量級且高效，適用於簡單結構，但不適合嵌套資料的獨立複製。

1.1 使用 Object.assign()

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

shallowCopy.b.c = 42; 
console.log(original.b.c); // OUTPUT: 42 (The original object also affected due to shared reference)

1.2 使用擴充運算子 (...)

const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };

shallowCopy.b.c = 90;
console.log(original.b.c); // OUTPUT: 90

1.3 讓我們來看一個陣列方法淺複製的範例（切片、連接）

const original = [1, 2, [3, 4]];
const shallowCopy = original.slice();

shallowCopy[2][0] = 10; 
console.log(original[2][0]); // OUTPUT: 10

2. 深拷貝

定義
深層複製創建物件或陣列的完全獨立的副本。所有層級（包括嵌套結構）都會被遞歸複製。複製結構的變更不會影響原始結構，反之亦然。

特點

• 遞歸複製結構的所有層級。
• 巢狀物件或陣列獨立於原始物件或陣列。
• 計算量比淺拷貝重。

2.1 使用 JSON.stringify() 和 JSON.parse()

• 將物件轉換為 JSON 字串，然後再轉換回新物件。
• 限制：不處理函數、日期、正規表示式或循環參考。

const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));

deepCopy.b.c = 42;
console.log(original.b.c); // OUTPUT: 2 (original remains unaffected)

2.2 使用 StructuredClone()
一種現代的深度複製方法，支援循環引用和日期等特殊物件。

const original = { a: 1, b: { c: 2 }, date: new Date() };
const deepCopy = structuredClone(original);

deepCopy.b.c = 42;
console.log(original.b.c); // OUTPUT: 2
console.log(original.date === deepCopy.date); // FALSE

2.3 使用自訂遞歸函數
手動處理複雜案例的靈活解決方案。

function deepCopy(obj) {
  if (obj === null || typeof obj !== "object") return obj; 

  if (Array.isArray(obj)) return obj.map(deepCopy); 

  const copy = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  return copy;
}

const original = { a: 1, b: { c: 2 } };
const deepCopyObj = deepCopy(original);

deepCopyObj.b.c = 42;
console.log(original.b.c); // OUTPUT: 2

3. 何時使用每一個？

淺複製

• 適用於沒有巢狀結構的平面物件或陣列。
• 當效能至關重要時，嵌套物件的共用引用是可以接受的。

深複製

• 對於複雜、深度嵌套的物件/陣列。
• 當您需要副本和原件之間真正獨立時。

4. 總結

淺複製

• 簡單高效。
• 適合扁平結構或可接受共享引用的情況。

深複製

• 穩健並確保完全獨立。
• 非常適合深層嵌套或複雜的結構。

這是對 JavaScript 中物件的淺拷貝和深拷貝的深入解釋。根據您的用例和效能要求選擇適當的方法。

以上是JavaScript 中的淺複製與深複製的詳細內容。更多資訊請關注PHP中文網其他相關文章！