JavaScript 淺複製與深複製：範例與最佳實踐

在 JavaScript 中使用物件和陣列時，建立資料結構的副本是一項常見任務。然而，開發人員在淺拷貝和深拷貝之間做出選擇時經常面臨挑戰。誤解這些差異可能會導致程式碼中出現意想不到的副作用。讓我們深入探討這些概念、它們的差異以及何時使用它們。

---

？ 下載電子書 - JavaScript：從 ES2015 到 ES2023

---

什麼是淺拷貝？

淺拷貝使用原始物件的頂層屬性的副本建立一個新物件。對於基元屬性（例如數字、字串、布林值），將複製值本身。但是，對於物件屬性（如陣列或嵌套物件），僅複製引用，而不複製實際資料。

這表示雖然新物件有自己的頂層屬性副本，但巢狀物件或陣列在原始物件和副本之間保持共用。

淺拷貝範例

const original = {
  name: "Alice",
  details: {
    age: 25,
    city: "Wonderland"
  }
};

// Shallow copy
const shallowCopy = { ...original };

// Modify the nested object in the shallow copy
shallowCopy.details.city = "Looking Glass";

// Original object is also affected
console.log(original.details.city); // Output: "Looking Glass"

如何建立淺拷貝

1. 使用擴充運算子 (...)：

   const shallowCopy = { ...originalObject };

1. 使用Object.assign()：

   const shallowCopy = Object.assign({}, originalObject);

雖然這些方法快速且簡單，但它們不適合深度嵌套的物件。

---

什麼是深拷貝？

深層複製會複製原始物件的每個屬性和子屬性。這確保了副本完全獨立於原始對象，並且對副本的更改不會影響原始對象。

在處理嵌套物件或陣列等複雜資料結構時，深度複製至關重要，特別是在資料完整性至關重要的情況下。

深層複製範例

const original = {
  name: "Alice",
  details: {
    age: 25,
    city: "Wonderland"
  }
};

// Shallow copy
const shallowCopy = { ...original };

// Modify the nested object in the shallow copy
shallowCopy.details.city = "Looking Glass";

// Original object is also affected
console.log(original.details.city); // Output: "Looking Glass"

如何建立深層副本

1. 使用 JSON.stringify() 和 JSON.parse()：
   • 將物件轉換為 JSON 字串，然後將其解析回新物件。
   • 限制：
     • 無法處理循環引用。
     • 忽略函數、未定義或符號等屬性。

   const shallowCopy = { ...originalObject };

1. 使用庫：
   • 像 Lodash 這樣的函式庫提供了強大的深度克隆方法。

   const shallowCopy = Object.assign({}, originalObject);

1. 自訂遞歸函數：
   • 為了完全控制，您可以編寫遞歸函數來克隆巢狀物件。

---

淺複製與深複製的比較

功能 淺複製 深複製 標題>

Feature	Shallow Copy	Deep Copy
Scope	Copies only top-level properties.	Copies all levels, including nested data.
References	Nested references are shared.	Nested references are independent.
Performance	Faster and lightweight.	Slower due to recursive operations.
Use Cases	Flat or minimally nested objects.	Deeply nested objects or immutable structures.

範圍 僅複製頂級屬性。 複製所有級別，包括嵌套資料。 參考文獻 巢狀引用是共享的。 巢狀引用是獨立的。 性能 更快、更輕量。 由於遞歸操作而較慢。 用例 平面或最小巢狀物件。 深度嵌套的物件或不可變的結構。 表>

---

何時使用淺複製

• 平面物件：處理沒有巢狀屬性的簡單物件時。
• 效能：當速度至關重要且不需要處理深層巢狀資料時。
• 暫時變更：當您打算修改頂層屬性但共用巢狀資料時。

範例用例

複製使用者的設定物件以進行快速調整：

const original = {
  name: "Alice",
  details: {
    age: 25,
    city: "Wonderland"
  }
};

// Shallow copy
const shallowCopy = { ...original };

// Modify the nested object in the shallow copy
shallowCopy.details.city = "Looking Glass";

// Original object is also affected
console.log(original.details.city); // Output: "Looking Glass"

---

何時使用深度複製

• 複雜結構：適用於具有多層嵌套的物件。
• 避免副作用：當您需要確保副本中的變更不會影響原始版本。
• 狀態管理：在 React 或 Redux 等框架中，不變性至關重要。

範例用例

複製遊戲或應用程式的狀態：

   const shallowCopy = { ...originalObject };

---

常見錯誤和陷阱

1. 假設淺拷貝總是足夠的:

   • 開發人員經常錯誤地對巢狀物件使用淺複製方法，導致原始資料發生意外變更。

2. 過度使用 JSON 方法:

   • 雖然 JSON.stringify/JSON.parse 很簡單，但它並不適用於所有物件（例如，包含方法或循環引用的物件）。

3. 忽略表現：

   • 深度複製方法可能會比較慢，尤其是對於大型對象，因此請謹慎使用它們。

---

結論

理解淺複製和深複製之間的差異對於編寫無錯誤的 JavaScript 程式碼至關重要。淺拷貝對於平面結構是有效的，而深拷貝對於複雜的嵌套物件是必不可少的。根據您的資料結構和應用程式需求選擇合適的方法，並透過了解每種方法的局限性來避免潛在的陷阱。

---

？ 下載電子書 - JavaScript：從 ES2015 到 ES2023

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