关于JS实现深拷贝和浅拷贝的方式

落日映苍穹つ 2024-03-23 18:58 54阅读 0赞

![54b601aa36393ce9e6d356e3c1c6acac.jpeg][]

深拷贝和浅拷贝是面试中经常出现的,主要考察对基本类型和引用类型的理解深度,本文主要给大家介绍了js实现深拷贝和浅拷贝的方式,需要的朋友可以参考下

说道数据拷贝就离不开数据类型，在JS中数据类型分为基本类型和引用类型 基本类型：

number， boolean，string，symbol，bigint，undefined，null

引用类型：

object 以及一些标准内置对象 Array、RegExp、String、Map、Set..

### 一. 基本类型数据拷贝 ###

基本类型数据都是值类型，存储在栈内存中，每次赋值都是一次复制的过程

### 二. 引用类型数据拷贝 ###

#### 1、浅拷贝 ####

只拷贝对象的一层数据，再深处层次的引用类型value将只会拷贝引用 实现方式：

1.Object.assign() 和 ES6的拓展运算符

通常我们用 Object.assign() 方法来实现浅拷贝。 Object.assign()用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

2.Object.create

Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的\_\_proto\_\_。Object.create(proto，\[propertiesObject\])接收两个参数一个是新创建对象的\_\_proto\_\_， 一个属性列表

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </td> 
 <td> <code>let aa = { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>a: undefined, </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>func: </code><code>function</code><code>(){console.log(1)}, </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>b:2, </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>c: {x: </code><code>'xxx'</code><code>, xx: undefined},</code> <code>}</code> <code>let bb = Object.create(aa, Object.getOwnPropertyDescriptors(aa))</code> <code>aa.c.x = 111</code> <code>console.log(bb)</code> <code>// 第一层拷贝，遇到引用类型的值就会只拷贝引用</code> <code>// { </code> <code>//&nbsp;&nbsp;&nbsp;&nbsp; a: undefined,</code> <code>//&nbsp;&nbsp;&nbsp;&nbsp; func: [Function: func],</code> <code>//&nbsp;&nbsp;&nbsp;&nbsp; b: 2,</code> <code>//&nbsp;&nbsp;&nbsp;&nbsp; c: { x: 111, xx: undefined },</code> <code>// }</code> </td> 
 </tr> 
 </tbody> 
</table>

#### 2、深拷贝 ####

在拷贝一个对象的时候为了避免修改对数据造成的影响，必须使用深拷贝。

实现方式：

1、 通过JSON.stringify()

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>var</code> <code>a = {a:1, b: 2}</code> <code>var</code> <code>b = JSON.stringify(a);</code> <code>a.a = </code><code>'a'</code> <code>console.log(a, b) </code><code>// { a: 'a', b: 2 } {"a":1,"b":2}</code> </td> 
 </tr> 
 </tbody> 
</table>

JSON.stringify()进行深拷贝有弊端： 忽略value为function, undefind, symbol, 并且在序列化BigInt时会抛出语法错误：TypeError: Do not know how to serialize a BigInt

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 </td> 
 <td> <code>// 序列化function, undefind, symbol,忽略--------------------------------------------------------</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>obj = { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>a:</code><code>function</code><code>(){}, </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>b: undefined, </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>c: </code><code>null</code><code>, </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>d: Symbol(</code><code>'s'</code><code>), </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>objCopyed = JSON.stringify(obj);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>"a:"</code><code>, a) </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// obj: { a: [Function: a], b: undefined, c: null, d: Symbol(s) }</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>"objCopyed:"</code><code>, objCopyed) </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// objCopyed: {"c":null}</code> <code>// 序列化bigint抛出错误--------------------------------------------------------</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>obj = { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>a: 1,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>e: BigInt(9007199254740991)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>objCopyed = JSON.stringify(obj); </code><code>// TypeError: Do not know how to serialize a BigInt</code> </td> 
 </tr> 
 </tbody> 
</table>

2、递归实现

<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 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 </td> 
 <td> <code>const deepCopy = (obj) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 优化 把值类型复制方放到这里可以少一次deepCopy调用</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// if(!obj || typeof obj !== 'object') throw new Error("请传入非空对象")</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(!obj || </code><code>typeof</code> <code>obj !== </code><code>'object'</code><code>) </code><code>return</code> <code>obj</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let result = {}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code> <code>(Object.prototype.toString.call(obj).indexOf(</code><code>'Array'</code><code>) &gt; 0) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>result = []</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 另一种循环方式</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// for (let key in obj) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//&nbsp;&nbsp;&nbsp;&nbsp; if (obj.hasOwnProperty(key)) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; result[key] = deepClone(obj[key]) </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//&nbsp;&nbsp;&nbsp;&nbsp; }</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// }</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>Object.keys(obj).forEach(key =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 优化 把值类型复制方放到这里可以少一次deepCopy调用</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// if (obj[key] &amp;&amp; typeof obj[key] === 'object') { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//&nbsp;&nbsp;&nbsp;&nbsp; result[key] = deepCopy(obj[key])</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// }else{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//&nbsp;&nbsp;&nbsp;&nbsp; result[key] = obj[key]</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// }</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>result[key] = deepCopy(obj[key])</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>result</code> <code>}</code> <code>let aa = { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>a: undefined, </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>func: </code><code>function</code><code>(){console.log(1)}, </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>b:2, </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>c: {x: </code><code>'xxx'</code><code>, xx: undefined},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>d: </code><code>null</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>e: BigInt(100),</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>f: Symbol(</code><code>'s'</code><code>)</code> <code>}</code> <code>let bb = deepCopy(aa)</code> <code>aa.c.x = 123</code> <code>aa.func = {}</code> <code>console.log(</code><code>"aa"</code><code>, aa)</code> <code>console.log(</code><code>"bb"</code><code>, bb)</code> <code>// aa { </code> <code>//&nbsp;&nbsp;&nbsp;&nbsp; a: undefined,</code> <code>//&nbsp;&nbsp;&nbsp;&nbsp; func: {},</code> <code>//&nbsp;&nbsp;&nbsp;&nbsp; b: 2,</code> <code>//&nbsp;&nbsp;&nbsp;&nbsp; c: { x: 123, xx: undefined },</code> <code>//&nbsp;&nbsp;&nbsp;&nbsp; d: null,</code> <code>//&nbsp;&nbsp;&nbsp;&nbsp; e: 100n,</code> <code>//&nbsp;&nbsp;&nbsp;&nbsp; f: Symbol(s)</code> <code>//&nbsp; }</code> <code>// bb { </code> <code>//&nbsp;&nbsp;&nbsp;&nbsp; a: undefined,</code> <code>//&nbsp;&nbsp;&nbsp;&nbsp; func: [Function: func],</code> <code>//&nbsp;&nbsp;&nbsp;&nbsp; b: 2,</code> <code>//&nbsp;&nbsp;&nbsp;&nbsp; c: { x: 'xxx', xx: undefined },</code> <code>//&nbsp;&nbsp;&nbsp;&nbsp; d: null,</code> <code>//&nbsp;&nbsp;&nbsp;&nbsp; e: 100n,</code> <code>//&nbsp;&nbsp;&nbsp;&nbsp; f: Symbol(s)</code> <code>// }</code> </td> 
 </tr> 
 </tbody> 
</table>

手写深拷贝等这些工具方法，在实际生产中99.99%不会用到，毕竟有lodash、underscore这些方便的工具库呢？

到此这篇关于JS实现深拷贝和浅拷贝的方式详解的文章就介绍到这了,希望可以对你有所帮助！

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

[54b601aa36393ce9e6d356e3c1c6acac.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/b372e4147fa640bcac216537f3be6177.png
[Link 1]: https://m.weidianyuedu.com/
[https_www.weidianyuedu.com]: https://www.weidianyuedu.com