大家好，我是Echa。
最近有一位00後的小妹妹粉絲私信小編說自己很喜歡程式設計，目前在某公司實習前端開發工作，說到現在為止還沒有搞懂JavaScript中深拷貝和淺拷貝這個問題，同時也在網上看了很多關于深拷貝的文章，但是品質良莠不齊，有很多都考慮得不周到，寫的方法比較簡陋，難以令人滿意，了解的迷迷糊糊。讓小編深入剖析JavaScript中深淺拷貝。
看這位小姑娘如此的好學，不懂就問的這種精神可嘉，小編非常佩服。仿佛看見當年自己好學的影子了。在這裡給她點贊。
對于深拷貝和淺拷貝這個問題，相信大家都遇到過，那麼怎麼區分深拷貝和淺拷貝這個問題呢？
往簡單了了解，就是一句話概括：假設有一個變量A，變量B複制了變量A，如果我們修改變量A，看變量B是否會發生改變，如果改變了，那麼就是淺拷貝，如果變量A值的變化不影響B，那麼就是深拷貝，估計用文字說這麼多，可能大家都會看懵了。
先概念介紹
- 深拷貝：在堆記憶體中重新開辟一個存儲空間，完全克隆一個一模一樣的對象；
- 淺拷貝：不在堆記憶體中重新開辟空間，隻複制棧記憶體中的引用位址。
本質上兩個對象（數組）依然指向同一塊存儲空間
還看不懂的話，看下圖：
JavaScript中淺拷貝
淺拷貝： 建立一個新的對象，來接受你要重新複制或引用的對象值。如果對象屬性是基本的資料類型，複制的就是基本類型的值給新對象；但如果屬性是引用資料類型，複制的就是記憶體中的位址，如果其中一個對象改變了這個記憶體中的位址所指向的對象，肯定會影響到另一個對象。
首先我們看看一些淺拷貝的方法，如下圖：
JavaScript中淺拷貝
這裡隻列舉了常用的幾種方式，除此之外當然還有其他更多的方式。注意，我們直接使用=指派不是淺拷貝，因為它是直接指向同一個對象了，并沒有傳回一個新對象。
手動實作一個淺拷貝：
function shallowClone(target) {
if (typeof target === 'object' && target !== null) {
const cloneTarget = Array.isArray(target) ? [] : {};
for (let prop in target) {
if (target.hasOwnProperty(prop)) {
cloneTarget[prop] = target[prop];
}
}
return cloneTarget;
} else {
return target;
}
}
// 測試
const shallowCloneObj = shallowClone(obj)
shallowCloneObj === obj // false，傳回的是一個新對象
shallowCloneObj.arr === obj.arr // true，對于對象類型隻拷貝了引用 從上面這段代碼可以看出，利用類型判斷（檢視typeof），針對引用類型的對象進行 for 循環周遊對象屬性指派給目标對象的屬性（for...in語句以任意順序周遊一個對象的除Symbol以外的可枚舉屬性，包含原型上的屬性。檢視for…in），基本就可以手工實作一個淺拷貝的代碼了。
JavaScript中深拷貝
在日常開發中，深拷貝是一個常見需求，我們可以通過 JSON 轉換、遞歸、 Lodash _.cloneDeep() 等方式實作。下面小編一一深入剖析
第一種：遞歸方式（推薦，項目中最安全最常用）
使用遞歸的方式進行對象（數組）的深拷貝，奉上已封裝的深拷貝函數：
上方函數的使用方式：
//函數拷貝
const copyObj = (obj = {}) => {
//變量先置空
let newobj = null;
//判斷是否需要繼續進行遞歸
if (typeof (obj) == 'object' && obj !== null) {
newobj = obj instanceof Array ? [] : {};
//進行下一層遞歸克隆
for (var i in obj) {
newobj[i] = copyObj(obj[i])
}
//如果不是對象直接指派
} else newobj = obj;
return newobj;
}
上方函數的使用方式：
//模拟對象
let obj = {
numberParams:1,
functionParams:() => {
console.log('歡迎關注 Echa工程師');
},
objParams:{
a:1,
b:2
}
}
const newObj = copyObj(obj); //這樣就完成了一個對象的遞歸拷貝
obj.numberParams = 100; //更改第一個對象的指
console.log(newObj.numberParams); //輸出依然是1 不會跟随obj去改變 第二種：JSON.stringify() ；(這個不推薦使用，有坑)
這個方法有坑，詳細講解請看我另一篇文章 “使用JSON.stringify進行深拷貝的坑” 以下是代碼示例：
let obj = {
a:1,
b:"來今日頭條，歡迎關注 Echa工程師。後面會不定期更新幹貨和技術相關的資訊推薦"
}
//先轉為json格式字元，再轉回來
let newObj = JSON.parse(JSON.stringify(obj));
obj.a = 50;
console.log(newObj.a); //輸出 1 普通的對象也可以進行深拷貝，但是！！！當對象内容項為 number、string、boolean的時候，是沒有什麼問題的。但是，如果對象内容項為undefined、null、Date、RegExp、function，error的時候。使用JSON.stringify()進行拷貝就會出問題了。
第三種：使用第三方庫lodash中的cloneDeep()方法
是否推薦使用，看情況吧。如果我們的項目中隻需要一個深拷貝的功能，這種情況下為了一個功能引入整個第三方庫就顯得很不值得了。不如寫一個遞歸函數對于項目來說性能更好。
lodash.cloneDeep()代碼示例：
import lodash from 'lodash';
let obj = {
a: {
c: 2,
d: [1, 3, 5],
e:'Echa工程師'
},
b: 4
}
const newObj = lodash.cloneDeep(obj);
obj.b = 20;
console.log(newObj.b); //輸出 4； 不會改變 實際上，cloneDeep()方法底層使用的本來就是遞歸方法。隻是在外層又封裝了一層而已。
是以，如果不是原先項目中有使用 lodash 這個庫的話，大可不必為了這一個功能而去引入它。
文章上方有提供進行深拷貝的函數，推薦使用。大家可自取。
第四種:JQuery的extend()方法進行深拷貝（推薦在JQ中使用）
這個方法僅适用于JQuery建構的項目。JQuery自身攜帶的extend()方法可以進行深拷貝，不用自己寫遞歸也不用引入第三方庫還沒什麼坑。
在JQuery項目中的使用方式：
let obj = {
a: {
c: 2,
d: [1, 3, 5],
e:'Echa工程師'
},
b: 4
}
let newObj= $.extend(true, {}, obj1); //拷貝完成
obj.b = 20;
console.log(newObj.b); //輸出 4 第五種：structuredClone（）方法進行深拷貝
實際上，JavaScript 中提供了一個原生 API 來執行對象的深拷貝：structuredClone。它可以通過結構化克隆算法建立一個給定值的深拷貝，并且還可以傳輸原始值的可轉移對象。本文将深入探讨 structuredClone() 函數的原理、使用方法及注意事項，以幫助開發者更好地應用現代 JavaScript 技術實作深拷貝。
structuredClone 基本使用
structuredClone() 的實用方式很簡單，隻需将原始對象傳遞給該函數，它将傳回具有不同引用和對象屬性引用的深層副本·：
const originalObject = {
name: "John",
age: 30,
address: {
street: "123 Main St",
city: "Anytown",
state: "Anystate"
},
date: new Date(123),
}
const copied = structuredClone(originalObject); 這裡 copied 的結果如下：
可以看到，這裡不僅拷貝了對象，還拷貝了嵌套的對象和數組，甚至 Date 對象。structuredClone() 不僅可以做到這些，還可以：
- 拷貝無限嵌套的對象和數組；
- 拷貝循環引用；
- 拷貝各種 JavaScript 類型，例如Date、Set、Map、Error、RegExp、ArrayBuffer, Blob、File、ImageData等；
- 拷貝同樣，所使用的結構化克隆算法也structuredClone()不能克隆 DOM 元素。将 HTMLElement 對象傳遞給structuredClone()将導緻如上所示的錯誤。
- 任何可轉移的對象。
在 JavaScript 中，可轉移對象（Transferable Objects）是指 ArrayBuffer 和 MessagePort 等類型的對象，它們可以在主線程和 Web Worker 線程之間互相傳遞，同時還可以實作零拷貝記憶體共享，提高性能。這是由于可轉移對象具有兩個特點：
- 可共享：可轉移對象本身沒有所有權，可以在多個線程之間共享，實作零拷貝記憶體共享。
- 可轉移：調用 Transferable API 時，可轉移對象會從發送方（發送線程）轉移到接收方（接收線程），不再存在于原始線程中，是以可以避免記憶體拷貝和配置設定等開銷。
要注意的是，使用可轉移對象時必須小心處理，因為一旦對象被轉移，原線程将不再擁有該對象的所有權，是以在發送線程中不能再通路該對象。此外，在接收線程中使用可轉移對象時，也需要根據需求進行顯式釋放，否則可能會導緻記憶體洩漏和其他問題。
例如，對于以下結構，仍然可以使用structuredClone()進行深拷貝：
const originalObject = {
set: new Set([1, 3, 3]),
map: new Map([[1, 2]]),
regex: /foo/,
deep: { array: [ new File(someBlobData, 'file.txt') ] },
error: new Error('Hello!')
}
originalObject.circular = originalObject
const copied = structuredClone(originalObject)
當對象中存在循環引用時，仍然可以通過 structuredClone() 進行深拷貝。
structuredClone 缺點
當然，structuredClone() 也并不是完美的，下面就來看看有哪些 structuredClone() 不能拷貝的資料類型。
函數或方法
當拷貝函數時，就會抛出異常：
function func() {}
const funcClone = structuredClone(func);
輸出結果如下：
當拷貝方法時，也會抛出異常：
const car = {
make: 'BMW',
move() {
console.log('vroom');
},
};
car.basedOn = car;
const cloned = structuredClone(car); 輸出結果如下：
DOM 節點
當拷貝 DOM 節點時，也會抛出異常：
const input = document.querySelector('#text-field');
// ❌ Failed: HTMLInputElement object could not be cloned.
const clone = structuredClone(input);
屬性描述符、setter 和 getter
屬性描述符、setter 和 getter 以及類似的中繼資料都不能被克隆。例如，對于 getter，結果值被克隆，但 getter 函數本身沒有被克隆（或任何其他屬性中繼資料）：
structuredClone({ get foo() { return 'bar' } })
輸出結果如下：
{ foo: 'bar' }
對象原型
原型鍊不能被周遊或拷貝。是以如果克隆一個執行個體 MyClass，克隆的對象将不再是這個類的一個執行個體（但是這個類的所有有效屬性都将被拷貝）
class MyClass {
foo = 'bar'
myMethod() { /* ... */ }
}
const myClass = new MyClass()
const cloned = structuredClone(myClass)
// { foo: 'bar' }
cloned instanceof myClass // false
支援拷貝的類型
structuredClone() 支援拷貝的類型如下：
JS 内置對象
Array（數組）、ArrayBuffer（資料緩沖區）、Boolean（布爾類型）、DataView（資料視圖）、Date（日期類型）、Error（錯誤類型，包括下面列出的具體類型）、Map（映射類型）、Object （僅指純對象，如從對象字面量中建立的對象）、原始類型（除symbol外，即 number、string、null、undefined、boolean、BigInt）、RegExp（正規表達式）、Set（集合類型）、TypedArray（類型化數組）。
Error 類型
Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError。
Web/API 類型
AudioData、Blob、CryptoKey、DOMException、DOMMatrix、DOMMatrixReadOnly、DOMPoint、DomQuad、DomRect、File、FileList、FileSystemDirectoryHandle、FileSystemFileHandle、FileSystemHandle、ImageBitmap、ImageData、RTCCertificate、VideoFrame。
浏覽器支援
目前主流浏覽器都支援 structuredClone API：
為什麼不用 JSON.parse(JSON.stringify(x))？
我們平時可能會通過 JSON.parse(JSON.stringify(x)) 來進行深拷貝，那它有什麼缺點呢？
來看下面的例子：
const originalObject = {
title: "hello",
date: new Date(123),
attendees: ["Steve"]
}
const copied = JSON.parse(JSON.stringify(originalObject))
通過這種方式，得到的 copied 值如下：
{
title: "hello",
date: "1970-01-01T00:00:00.123Z",
attendees: [
"Steve"
]
}
可以看到，這裡的 date 并不是我們想要的 Date 對象，而是一個字元串。發生這種情況就是因為 JSON.stringify 隻能處理基本對象、數組和基本類型，而其他類型的值在轉換之後都可能出現出乎意料的結果，例如 Date 會轉化為字元串， Set 會轉化為 {}。JSON.stringify甚至完全忽略某些内容，比如undefined或函數。
例如：
const originalObject = {
set: new Set([1, 3, 3]),
map: new Map([[1, 2]]),
regex: /foo/,
deep: { array: [ new File(someBlobData, 'file.txt') ] },
error: new Error('Hello!')
}
const copied = JSON.parse(JSON.stringify(originalObject))
這裡得到的 copied 值如下：
{
set: {},
map: {},
regex: {},
deep": {
array: [
{}
]
},
error: {},
}
除此之外，JSON.parse(JSON.stringify(x)) 無法對包含循環引用的對象進行深克隆：
const originalObject = {
set: new Set([1, 3, 3]),
map: new Map([[1, 2]]),
regex: /foo/,
error: new Error('Hello!')
}
originalObject.circular = originalObject
const copied = JSON.parse(JSON.stringify(originalObject))
當執行上述代碼時，就會報錯：
是以，如果對象沒有上面說的這些情況，使用 JSON.parse(JSON.stringify(x)) 進行深克隆是完全沒有問題的。如果有，就可以使用 structuredClone() 來進行深拷貝。
最後
大家明白看完這篇文章深入剖析JavaScript中深淺拷貝，了解多少了，歡迎在評論區讨論。
創作不易，喜歡的老鐵們加個關注，點個贊，打個賞，後面會不定期更新幹貨和技術相關的資訊，速速收藏，謝謝！你們的一個小小舉動就是對小編的認可，更是創作的動力。