JavaScript的原始數據類型是不可變的，這意味著一旦創建，它們的值就不能改變。但是，對象和數組是可變的，允許在創建后修改它們的值。

實際上，這意味著原始數據是通過值傳遞的，而對象和數組是通過引用傳遞的。考慮以下例子：

let str = 'Hello';
let copy = str;
copy = 'Hi';
// str = 'Hello', copy = 'Hi'


let obj = { a: 1, b: 2 };
let objCopy = obj;
objCopy.b = 4;
// obj = { a: 1, b: 4}, objCopy = { a: 1, b: 4 }

你可以看到，對象obj是通過引用傳遞給objCopy的。修改其中一個變量會影響另一個變量，因為它們都引用同一個對象。那我們如何解決這個問題呢？答案是克隆對象。

淺復制

使用展開運算符（...）或 Object.assign()，我們可以克隆對象并根據其屬性創建一個新對象。

const shallowClone = obj => Object.assign({}, obj);


let obj = { a: 1, b: 2};
let clone = shallowClone(obj);
let otherClone = shallowClone(obj);


clone.b = 4;
otherClone.b = 6;
// obj = { a: 1, b: 2}
// clone = { a: 1, b: 4 }
// otherClone = { a: 1, b: 6 }

這種技術被稱為淺復制，因為它適用于外部（淺層）對象，但如果我們有嵌套（深層）對象，則會失敗，因為這些對象最終會通過引用傳遞。這就引出了下一部分。

圖片

深復制

為了創建一個對象的深復制，我們需要遞歸地克隆每一個嵌套對象，復制嵌套對象和數組。

網上有一些解決方案使用 JSON.stringify() 和 JSON.parse()。雖然這種方法在某些情況下可能有效，但它包含許多問題和性能問題，因此我建議不要使用它。

從邊界情況開始，我們需要檢查傳遞的對象是否為空，如果是，則返回 null。否則，我們可以使用 Object.assign() 和一個空對象 ({}) 來創建原始對象的淺復制。

然后，我們將使用 Object.keys() 和 Array.prototype.forEach() 來確定需要深復制哪些鍵值對。如果對象是一個數組，我們將設置克隆對象的長度與原對象相等，并使用 Array.from() 創建一個克隆對象。否則，我們將遞歸地調用函數，把當前值作為參數傳入。

深復制專用于簡單對象和數組。這意味著它無法處理類實例，函數和其他特殊情況。那么，我們如何處理這些情況呢？JavaScript最近給我們提供了一個新的工具來解決這個問題！

使用 structuredClone() 進行深復制

克隆顯然是一個很常見也很重要的問題。事實上，JavaScript引入了structuredClone()全局函數，可以用來深度克隆對象。而我們不需要實現復雜的遞歸函數，只需使用這個函數就可以克隆對象。

這種技術可用于數組和對象，代碼最少，是JavaScript中克隆對象的推薦方式，因為它性能最佳且最可靠。