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. 自訂遞歸函數：
   • 為了完全控制，您可以編寫遞歸函數來克隆巢狀物件。

淺複製與深複製的比較

何時使用淺複製

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

範例用例

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

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中文網其他相關文章！