javascript的深拷贝和浅拷贝

我会带着你远行 2022-10-01 04:58 148阅读 0赞

# 深拷贝和浅拷贝的对比 #

这两个都是针对对象的,比如说数组，不论是深拷贝还是浅拷贝,都是复制数组。那有什么不一样呢?

## 深拷贝 ##

var a1=[1,2,3,4]
    
    // 实现深拷贝
    var a2=[...a1];
    a1[0]=395
    console.log(a2); //[1, 2, 3, 4]
    console.log(a1); //[395, 2, 3, 4]
    复制代码

可以看出,深度拷贝出来的版本和原来的一份完全没有关系。改变原来的版本不会改变拷贝后的版本

## 浅拷贝 ##

var a1=[1,2,3,4]
    // 实现浅拷贝
    var a2=a1;
    a1[0]=395
    console.log(a2); //[395, 2, 3, 4]
    console.log(a1); //[395, 2, 3, 4]
    复制代码

可以看出,实现浅拷贝,a1和a2其实用的是同一份array.

## 原理 ##

深拷贝就是在堆里面复制了一份对象,这份被复制出来的对象和原来的对象没关系,浅拷贝就是直接把对象的指针赋值给另一个变量,另一个变量指向的还是原理的对象。 浅拷贝看下图

深拷贝看下图

看图发现区别就懂了。

## 怎么实现深拷贝 ##

### 递归 ###

//1 递归
    	function deepClone(obj){
    		let objClone = Array.isArray(obj)?[]:{};
    	            if(obj  && typeof obj==='object'){
    				for(key in obj){
    					if(obj.hasOwnProperty(key)){
    						//子类是不是对象，是的话要递归
    						if(obj[key] && typeof obj[key]=='object'){
    				objClone[key]=deepClone(obj[key])
    						}else{
    							 //如果不是，简单复制
    							objClone[key] = obj[key];
    						}
    					}
    				}
    			}
    			return objClone;
    	}
    	
    	var a1=[1,2,3];
    	var a2=deepClone(a1);
    	a1[0]=3858;
    	console.log(a2);
    复制代码

### JSON.stringify 和 JSON.parse ###

function deepClone2(obj){
    		let _obj = JSON.stringify(obj),
    		objClone = JSON.parse(_obj);
    		return objClone
    	}   
    	
    	var a1=[1,2,3];
    	var a2=deepClone2(a1);
    	a1[0]=3858;
    	console.log(a2);
    复制代码

### es6 ###

var a1={age:1}
    	var a2={...a1};
    	a1.age=38;
    	console.log(a2);
    复制代码

## 什么时候用 ##

就是在有时候需要复制一个对象的时候，或者缓存一个对象的时候使用。

转载于:https://juejin.im/post/5c7d12566fb9a049b2229b63