首頁 >web前端 >js教程 >如何正確複製 JavaScript 物件?

如何正確複製 JavaScript 物件?

Mary-Kate Olsen
Mary-Kate Olsen原創
2025-01-03 16:36:43145瀏覽

How to Properly Clone a JavaScript Object?

如何準確地複製 JavaScript 物件

在 JavaScript 中複製物件對於維護資料完整性和防止意外修改至關重要。但是,創建物件的簡單副本可能會無意中引入意外的變更。這是確保在JavaScript 中成功克隆物件的綜合指南:

結構化克隆(現代解決方案):

對於最新的瀏覽器,結構化克隆(在ES2020中引入)提供了一個簡單且可靠的解決方案:

const clone = structuredClone(object);

此方法產生準確的副本對象,包括其所有屬性,沒有任何不需要的額外內容。

傳統方法:

對於早期瀏覽器版本,複製物件需要更複雜的過程:

避免捷徑:

複製從內建JavaScript 物件派生的物件可能會導致引入其他屬性。為了防止這種情況,請僅克隆文字構造的物件。

處理原型繼承:

新物件通常從其原型繼承屬性。若要模倣此行為,您必須手動將繼承的屬性轉移到複製物件。

過濾掉非本地屬性:

預設不繼承不可枚舉屬性。使用 hasOwnProperty 方法從原型中過濾掉這類屬性。

考慮隱藏屬性:

某些物件具有隱藏屬性,例如prototype和__proto__,但它們不是可以透過枚舉來存取。這些屬性必須單獨處理。

處理日期物件:

日期物件有一個包含日期值的隱藏資料屬性。若要保留相同的日期,請對克隆的 Date 物件呼叫 setTime。請注意,此方法特定於 Date 物件。

複雜資料類型:

如果您的對象包含複雜資料類型,如數組或其他對象,則還必須克隆這些資料類型遞歸地確保完整的副本。

克隆函數:

這是一個遵循以下原則的綜合克隆函數:

function clone(obj) {
    if (null == obj || "object" != typeof obj) return obj;
    var copy = obj.constructor();
    for (var attr in obj) {
        if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
    }
    return copy;
}

限制:

需要注意的是,這個函數假定一組有限的資料類型,並且不處理循環引用或具有超出這些屬性的隱藏屬性的物件提到過。

以上是如何正確複製 JavaScript 物件?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn