JavaScript 中的淺複製與深複製-js教程-PHP中文網

JavaScript 中的淺複製與深複製

Mary-Kate Olsen

發布： 2024-11-25 05:32:17

原創

376 人瀏覽過

Shallow Copy vs. Deep Copy in 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

登入後複製