解析js中的深拷贝和浅拷贝

迷南。 2022-06-12 05:10 147阅读 0赞

js中的浅拷贝和深拷贝，只是针对复杂数据类型(Objcet，Array)的复制问题。简单来讲浅拷贝和深拷贝都可以实现在原有对象的基础上再生成一份的作用。但是根据新生成的对象能否影响到原对象可以分为浅拷贝和深拷贝。

## 概念1：浅拷贝 ##

浅拷贝就是指拷贝引用，新生成的引用和原来的引用都是指向同一个对象的实例，彼此之间的操作会相互影响。

## 概念2:深拷贝 ##

在堆中重新开辟内存，把原引用对应的对象实例中所有的内容进行拷贝，因此保证了深拷贝的对象和原来的对象是完全隔离的，他们之间相互没有影响。

## 概念3:数组深拷贝的实现 ##

1.使用for循环

<script type="text/javascript">
        		var arr1=['a','b','c'];
        		var arr2=[];
        		function deepCopy(arr1,arr2){
        			for(var i=0;i<arr1.length;i++){
        				arr2[i]=arr1[i];
        			}
        		}
        		deepCopy(arr1,arr2);
        		arr2[1]='d';
        		console.log(arr1);//['a','b','c']
        		console.log(arr2);//['a','d','c']
        	</script>

2 .使用slice()方法

<script type="text/javascript">
        		var arr1=['a','b','c'];
        		var arr2=arr1.slice(0);
        		arr2[1]='d';
        		console.log(arr1);//['a','b','c']
        		console.log(arr2);//['a','d','c']
        	</script>

3.使用concat方法

<script type="text/javascript">
        		var arr1=['a','b','c'];
        		var arr2=arr1.concat();
        		arr2[1]='d';
        		console.log(arr1);//['a','b','c']
        		console.log(arr2);//['a','d','c']
        	</script>

## 概念4：对象的深拷贝 ##

1.使用for循环

<script type="text/javascript">
        		var obj = {
      				name: 'FungLeo',
      				sex: 'man',
      				old: '18'
    			}
    			function copyObj(obj) {
      				let res = {}
      				for (var key in obj) {
        				res[key] = obj[key]
      				}
      				return res
    			}
    			var obj2 = copyObj(obj);
    			obj2["name"]="kka";
        	</script>

##     ##

2.借助JSON来实现

<script type="text/javascript">
        		var obj = {
      				name: 'FungLeo',
      				sex: 'man',
      				old: '18'
    			}
    			var obj2=JSON.parse(JSON.stringif(obj));
    			obj2["name"]="kka";
        	</script>

## 总结:以上就是实现数组和对象深拷贝的一些常用方法，可以结合具体的情形使用适合的方法。 ##

发表评论取消回复

表情：

评论列表（有 0 条评论，147人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS的深拷贝和浅拷贝

**浅拷贝** 指向同一个内存地址，改变一个对象，另一个跟着改变 var obj1 = { a: 11, b: 22 }; var obj...

àì夳堔傛蜴生んèń/ 2024年04月20日 09:34/ 0 赞/ 149 阅读

相关 js浅拷贝和深拷贝

浅拷贝：只复制对象的引用地址，两个对象指向同一个内存地址，所以修改其中任意一个的值，另一个也会随之改变，这就是浅拷贝。 **1.赋值** var m =...

ゝ一纸荒年。/ 2024年04月19日 10:18/ 0 赞/ 137 阅读

相关 JS深拷贝和浅拷贝

JS深拷贝和浅拷贝这里主要使用对象赋值，扩展运算符实现举例浅拷贝（类似于Object.assign()方法)，但是操作更简单一点；使用JSON.stringify

本是古典何须时尚/ 2023年10月02日 17:02/ 0 赞/ 65 阅读

相关 JS深拷贝和浅拷贝

浅拷贝 <script> // 浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用. // 深拷贝拷贝多层, 每一

我会带着你远行/ 2022年12月19日 06:26/ 0 赞/ 229 阅读

相关 js 中的深拷贝和浅拷贝

浅拷贝浅拷贝只会将对象的各个属性进行依次复制，并不会进行递归复制，而 JavaScript 存储对象都是存地址的，所以浅拷贝会导致复制的新对象和原对象指向同一块内存地址

快来打我*/ 2022年11月16日 05:49/ 0 赞/ 279 阅读

相关 JS的深拷贝和浅拷贝

> 前言: 原来工作只知道,使用 Object.assign(\{\},obj) 去拷贝一个对象会复制各个熟悉值.不会影响原对象. > >

一时失言乱红尘/ 2022年10月02日 08:50/ 0 赞/ 269 阅读

相关 js深拷贝和浅拷贝

一、数组的深浅拷贝在使用JavaScript对数组进行操作的时候，我们经常需要将数组进行备份，事实证明如果只是简单的将它赋予其他变量，那么我们只要更改其中的任何一个，然后其

墨蓝/ 2022年08月05日 02:57/ 0 赞/ 306 阅读

相关 js深拷贝和浅拷贝

一、数组的深浅拷贝在使用JavaScript对数组进行操作的时候，我们经常需要将数组进行备份，事实证明如果只是简单的将它赋予其他变量，那么我们只要更改其中的任何一个，然

清疚/ 2022年07月14日 14:52/ 0 赞/ 303 阅读

相关解析js中的深拷贝和浅拷贝

js中的浅拷贝和深拷贝，只是针对复杂数据类型(Objcet，Array)的复制问题。简单来讲浅拷贝和深拷贝都可以实现在原有对象的基础上再生成一份的作用。但是根据新生成的对象能否

迷南。/ 2022年06月12日 05:10/ 0 赞/ 148 阅读

相关 js深拷贝和浅拷贝

一、数组的深浅拷贝在使用JavaScript对数组进行操作的时候，我们经常需要将数组进行备份，事实证明如果只是简单的将它赋予其他变量，那么我们只要更改其中的任何一个，然后其

ゞ浴缸里的玫瑰/ 2022年04月24日 04:14/ 0 赞/ 301 阅读