关于JS实现深拷贝的几种方法

布满荆棘的人生 2024-03-23 18:56 48阅读 0赞

![de1057f8f19e1deba714869669c9ecde.jpeg][]

本文介绍了JS实现深拷贝的几种方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

### 导读 ###

如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。

此篇文章中也会简单阐述到**栈堆**，**基本数据类型**与**引用数据类型**，因为这些概念能更好的让你理解深拷贝与浅拷贝。

我们来举个浅拷贝例子：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>let a=[0,1,2,3,4],</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>b=a;</code> <code>console.log(a===b);</code> <code>a[0]=1;</code> <code>console.log(a,b);</code> </td> 
 </tr> 
 </tbody> 
</table>

![7da0a09b320942034f23912f72839c59.png][]

嗯？明明b复制了a，为啥修改数组a，数组b也跟着变了，这里我不禁陷入了沉思。

那么这里，就得引入基本数据类型与引用数据类型的概念了。

### 基本数据与复杂(引用)数据 ###

面试常问，基本数据类型有哪些，**number，string，boolean，null，undefined，symbol**以及未来ES10新增的**BigInt**(任意精度整数)七类。

引用数据类型(Object类)有常规名值对的无序对象\{a:1\}，数组\[1,2,3\]，以及函数等。

而这两类数据存储分别是这样的：

**a.基本类型--名值存储在栈内存中**，例如let a=1;

![396bdfdad8c9ad6a5aa1b9b41fa2f251.jpeg][]

当你b=a复制时，栈内存会新开辟一个内存，例如这样：

![3369061d6cad47b774f1408b721ae3be.jpeg][]

所以当你此时修改a=2，对b并不会造成影响，因为此时的b已自食其力，翅膀硬了，不受a的影响了。当然，let a=1,b=a;虽然b不受a影响，但这也算不上深拷贝，因为深拷贝本身只针对较为复杂的object类型数据。

**b.引用数据类型--名存在栈内存中，值存在于堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值**，我们以上面浅拷贝的例子画个图：

![17e9937890ac22657de88f12ed4ca027.jpeg][]

当b=a进行拷贝时，其实复制的是a的引用地址，而并非堆里面的值。

![d3ab79398ed71040c2b068af26dfb58a.jpeg][]

而当我们a\[0\]=1时进行数组修改时，由于a与b指向的是同一个地址，所以自然b也受了影响，这就是所谓的浅拷贝了。

![d09e4cae6bc1fede3fafaf6b903ffb45.jpeg][]

那，要是在堆内存中也开辟一个新的内存专门为b存放值，就像基本类型那样，岂不就达到深拷贝的效果了

![c6eeaa1bd26e239094a709f54945b266.jpeg][]

### 实现简单的深拷贝 ###

#### 1.我们怎么去实现深拷贝呢，这里可以递归递归去复制所有层级属性。 ####

这么我们封装一个深拷贝的函数(PS：只是一个基本实现的展示，并非最佳实践)

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 </td> 
 <td> <code>function</code> <code>deepClone(obj){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let objClone = Array.isArray(obj)?[]:{};</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(obj &amp;&amp; </code><code>typeof</code> <code>obj===</code><code>"object"</code><code>){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>for</code><code>(key </code><code>in</code> <code>obj){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(obj.hasOwnProperty(key)){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//判断ojb子元素是否为对象，如果是，递归复制</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(obj[key]&amp;&amp;</code><code>typeof</code> <code>obj[key] ===</code><code>"object"</code><code>){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>objClone[key] = deepClone(obj[key]);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code><code>else</code><code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//如果不是，简单复制</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>objClone[key] = obj[key];</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>objClone;</code> <code>}&nbsp;&nbsp;&nbsp; </code> <code>let a=[1,2,3,4],</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>b=deepClone(a);</code> <code>a[0]=2;</code> <code>console.log(a,b);</code> </td> 
 </tr> 
 </tbody> 
</table>

可以看到

![19244cc92cf9f817992eb4025183e48b.png][]

跟之前想象的一样，现在b脱离了a的控制，不再受a影响了。

这里再次强调，深拷贝，是拷贝对象各个层级的属性，可以看个例子。JQ里有一个extend方法也可以拷贝对象，我们来看看

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>let a=[1,2,3,4],</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>b=a.slice();</code> <code>a[0]=2;</code> <code>console.log(a,b);</code> </td> 
 </tr> 
 </tbody> 
</table>

![90f59d52fb23539fbf28ac3aaa3cd32d.png][]

那是不是说slice方法也是深拷贝了，毕竟b也没受a的影响，上面说了，深拷贝是会拷贝所有层级的属性，还是这个例子，我们把a改改

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>let a=[0,1,[2,3],4],</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>b=a.slice();</code> <code>a[0]=1;</code> <code>a[2][0]=1;</code> <code>console.log(a,b);</code> </td> 
 </tr> 
 </tbody> 
</table>

![b1bcffcc3027f7abb013ed9808ce6d7c.png][]

拷贝的不彻底啊，b对象的一级属性确实不受影响了，但是二级属性还是没能拷贝成功，仍然脱离不了a的控制，说明slice根本不是真正的深拷贝。

这里引用知乎问答里面的一张图

![ea063c1194adc5020f66937aed0115bb.jpeg][]

第一层的属性确实深拷贝，拥有了独立的内存，但更深的属性却仍然公用了地址，所以才会造成上面的问题。

同理，concat方法与slice也存在这样的情况，他们都不是真正的深拷贝，这里需要注意。

#### 2.除了递归，我们还可以借用JSON对象的parse和stringify ####

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td> <code>function</code> <code>deepClone(obj){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let _obj = JSON.stringify(obj),</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>objClone = JSON.parse(_obj);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>objClone</code> <code>}&nbsp;&nbsp;&nbsp; </code> <code>let a=[0,1,[2,3],4],</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>b=deepClone(a);</code> <code>a[0]=1;</code> <code>a[2][0]=1;</code> <code>console.log(a,b);</code> </td> 
 </tr> 
 </tbody> 
</table>

![25fe8423ce5a0ca3cd551a78de9ef5f5.png][]

可以看到，这下b是完全不受a的影响了。

#### 3.除了上面两种方法之外，我们还可以借用JQ的extend方法。 ####

`$.extend( [deep ], target, object1 [, objectN ] )`

**deep**表示是否深拷贝，为true为深拷贝，为false，则为浅拷贝

**target** **Object**类型 目标对象，其他对象的成员属性将被附加到该对象上。

**object1 objectN**可选。 Object类型 第一个以及第N个被合并的对象。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>let a=[0,1,[2,3],4],</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>b=$.extend(</code><code>true</code><code>,[],a);</code> <code>a[0]=1;</code> <code>a[2][0]=1;</code> <code>console.log(a,b);</code> </td> 
 </tr> 
 </tbody> 
</table>

可以看到，效果与上面方法一样，只是需要依赖JQ库。

![71768bb807b77bcbc58c235c8c50f95d.png][]

说了这么多，了解深拷贝也不仅仅是为了应付面试题，在实际开发中也是非常有用的。例如后台返回了一堆数据，你需要对这堆数据做操作，但多人开发情况下，你是没办法明确这堆数据是否有其它功能也需要使用，直接修改可能会造成隐性问题，深拷贝能帮你更安全安心的去操作数据，根据实际情况来使用深拷贝，大概就是这个意思。

### 结语 ###

那么到这里，我们知道了深拷贝与浅拷贝的区别，同时从数据存储规则来解释，也明白了为什么要使用深拷贝；其次，我们知道了几种简单粗暴的深拷贝办法，也明白在何种情况下我们应该使用深拷贝。

到此这篇关于JS实现深拷贝的文章就介绍到这了，希望对大家的学习有所帮助。

转自： [微点阅读][Link 1] [https://www.weidianyuedu.com][https_www.weidianyuedu.com]

[de1057f8f19e1deba714869669c9ecde.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/b6b4462500d742399e73726ca9f1bc85.png
[7da0a09b320942034f23912f72839c59.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/93a6454bc03044f68ba9ddf6ab623ec9.png
[396bdfdad8c9ad6a5aa1b9b41fa2f251.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/b95130336ad34276998717bf7a5660d7.png
[3369061d6cad47b774f1408b721ae3be.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/12d8c95ebca14cfe9e17e8a80f174b79.png
[17e9937890ac22657de88f12ed4ca027.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/37808b2522a941bfb6a8af90aa9d22b0.png
[d3ab79398ed71040c2b068af26dfb58a.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/163bbc96371f425eb21188607ba2c8af.png
[d09e4cae6bc1fede3fafaf6b903ffb45.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/2961401c669d4660bf88ac29515aa050.png
[c6eeaa1bd26e239094a709f54945b266.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/25c1ae3ba8ef4bd9bb7845bff52da6c9.png
[19244cc92cf9f817992eb4025183e48b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/286868bf1d804057907701dedd8f1aa7.png
[90f59d52fb23539fbf28ac3aaa3cd32d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/ca4fa8224e0c4b0abbbbb83c19d43ef9.png
[b1bcffcc3027f7abb013ed9808ce6d7c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/b9ccb67cc2a548b3ac7adccf1a60b437.png
[ea063c1194adc5020f66937aed0115bb.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/a2aee0106a614a9a9fff0fa28c8f1ce7.png
[25fe8423ce5a0ca3cd551a78de9ef5f5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/5e3dfc94ccbc4ae18ff7feb4c69076c4.png
[71768bb807b77bcbc58c235c8c50f95d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/0aa8fea48b994956a3832f2af2a391b6.png
[Link 1]: https://m.weidianyuedu.com/
[https_www.weidianyuedu.com]: https://www.weidianyuedu.com