JS 中的淺拷貝 (Shallow copy) 與深拷貝 (Deep copy)

  • 32
  • 0
  • JS
  • 2024-10-18

有關於JS 中的淺拷貝 (Shallow copy) 與深拷貝 (Deep copy)

在做前端資料應用時
 if (data.length != 0) {
    // 將是完全獨立的拷貝
    LeavequotaDate = data
    TempLeavequotaDate = data;
    Set_LeavequotaDate(data);
}

TempLeavequotaDate 的資料改變,LeavequotaDate 也跟著一起改變
問了萬能的GPT,他開釋
在 JavaScript 中,當你將一個物件指派給另一個變數時,兩個變數將參考同一個物件。這意味著,如果你改變 TempLeavequotaDate 中的任何屬性,LeavequotaDate 也會反映這些改變,因為它們實際上是參考同一個物件。

如果你想要複製 data 而不影響原始物件,你需要進行淺拷貝或深拷貝,取決於你的需求。

淺拷貝

淺拷貝會創建一個新的物件,但內部的子物件仍然是原始物件的引用。


深拷貝

深拷貝會創建一個完全獨立的物件,包括內部的子物件。

最後,還是搜尋一下這關鍵字….

https://www.programfarmer.com/articles/2021/javascript-shallow-copy-deep-copy

詳細說明於此

最後改成
 if (data.length != 0) {
    // 將是完全獨立的拷貝
    LeavequotaDate = JSON.parse(JSON.stringify(data));
    TempLeavequotaDate = JSON.parse(JSON.stringify(data));//保留原始資訊做還原用
    Set_LeavequotaDate(data);
}