如何在不同環境下有效克隆JavaScript物件？

如何準確地複製 JavaScript 物件

在 JavaScript 中複製物件涉及建立獨立於原始物件的副本。對克隆所做的修改不應影響原始對象，反之亦然。

內建克隆 (ES2022)

ES2022 引入了 StructuredClone()，提供了一種高效且標準的克隆對象的方法。它支援克隆複雜的資料結構，包括循環引用。

const clone = structuredClone(object);

舊版瀏覽器的手動複製

對於不支援 StructuredClone() 的瀏覽器，需要手動複製過程。雖然可以透過簡單的賦值來複製簡單對象，但具有不可枚舉屬性或原型繼承的複雜對象需要更嚴格的方法：

function clone(obj) {
  // Handle null, undefined, and simple types
  if (obj === null || typeof obj !== "object") return obj;

  // Clone custom Date objects
  if (obj instanceof Date) {
    return new Date(obj.getTime());
  }

  // Clone Arrays
  if (obj instanceof Array) {
    return obj.map(clone);
  }

  // Clone Objects
  if (obj instanceof Object) {
    let clone = {};
    for (const key in obj) {
      if (obj.hasOwnProperty(key)) {
        clone[key] = clone(obj[key]);
      }
    }
    return clone;
  }

  throw new Error("Unable to clone object. Its type is not supported.");
}

此函數處理Date 和Array 對象的特殊情況，確保正確複製自訂屬性，並跳過原型屬性以防止克隆不需要的屬性。

雖然這種手動克隆方法更複雜，但它提供了更大的靈活性並支援更多的資料類型與簡單的作業相比。需要注意的是，它假定資料結構沒有循環引用，因為克隆此類結構時可能會發生無限遞歸。

以上是如何在不同環境下有效克隆JavaScript物件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！