js的深拷贝和浅拷贝（js深拷贝方法）

一 
  
  
  
  
  
 、ES6中扩展运算符

ES6中的扩展运算符（如果只是一层数组或者对象就是深拷贝            ，多层就是浅拷贝）

var obj = { name : "海绵宝宝", age: 18, sayHello (){ console.log("比奇堡早上好"); } } var newObj = {...obj} console.log("obj :",obj); console.log("newObj :",newObj);

运行结果

对newObj进行修改
 
  
 
  
 
  
 
  
 
  
 
  ，并不会改变obj的属性

var obj = { name : "海绵宝宝", age: 18, sayHello (){ console.log("比奇堡早上好"); } } var newObj = {...obj} console.log("obj :",obj); console.log("newObj :",newObj); newObj.name = "派大星" console.log("对newObj进行修改后"); console.log("obj :",obj); console.log("newObj :",newObj);

运行结果：

扩展运算符可以实现深层次的拷贝











，但是多层数组或者对象就实现不了深拷贝了

代码：

var obj = { name:"海绵宝宝", age:20, bestFriend:{ name:"派大星", age:21, hobby:"抓水母" } } var newObj = {...obj} console.log("obj :",obj); console.log("newObj :",newObj); newObj.bestFriend.hobby = "发呆" console.log("修改过后......"); console.log("obj=>besFriend=>hobby :",obj.bestFriend.hobby); // 发呆 console.log("newObj=>besFriend=>hobby : :",newObj.bestFriend.hobby); //发呆

二 
  
  
  
  
  
 、JSON.parse( JSON.stringify ( 待拷贝对象 ) )

虽然是深拷贝  
  
  
  
  
  
，但是没有办法拷贝函数内部函数

代码：

var obj = { name : "海绵宝宝", age: 18, sayHello (){ console.log("比奇堡早上好"); } } var newObj = JSON.parse(JSON.stringify(obj)) console.log("obj :",obj); console.log("newObj :",newObj);

运行结果：（会发现新拷贝的newObj中并没有sayHello这个函数）

对newObj进行修改：

var obj = { name : "海绵宝宝", age: 18, sayHello (){ console.log("比奇堡早上好"); } } var newObj = JSON.parse(JSON.stringify(obj)) console.log("obj :",obj); console.log("newObj :",newObj); newObj.name = "派大星" console.log("对newObj进行修改后"); console.log("obj :",obj); console.log("newObj :",newObj);

运行结果：

三

 


 


 


 


 


 
、数组中的slice和concat方法

这两个数组的方法虽然可以实现单层深拷贝 
  
  
  
  
  
 ，对于多层是无效的

slice方法： var arr = [1,2,3,4] var newArr = arr.slice() console.log("arr:",arr); console.log("newArr",newArr); newArr.push(5) console.log("修改newArr后"); console.log("arr:",arr); console.log("newArr",newArr);

运行结果：

concat方法： var arr = [1,2,3,4] var newArr = [].concat(arr) console.log("arr:",arr); console.log("newArr",newArr); newArr.push(5) console.log("修改newArr后"); console.log("arr:",arr); console.log("newArr",newArr);

运行结果：

两种方法均不可以拷贝深层次的数组

代码：

var arr = [1,2,3,4,[5,5,5,5]] var newArr = arr.slice() console.log("arr:",arr); console.log("newArr",newArr); newArr[4].push(6) console.log("修改newArr后"); console.log("arr:",arr); console.log("newArr",newArr);

运行结果：

四 
 
 
 
 
 
、jQuery 中的 $.extend (添加true就是深拷贝,不添加就是浅拷贝)

代码：

var obj = { name : "海绵宝宝", age: 18, sayHello (){ console.log("比奇堡早上好"); } } var newObj = {} $.extend(true,newObj,obj) console.log("obj:",obj); console.log("newObj:",newObj); newObj.name = "派大星" console.log("修改过后"); console.log("obj:",obj); console.log("newObj:",newObj);

运行结果：

五 
   
   
   
   
   
  、手写递归

实现思路： 在函数内部定义一个变量


 


 


 


 


 


 ，来存储拷贝出来的内容 首先判断传进来的参数是否是引用数据类型 
 
 
 
 
 
，不是引用数据类型返回参数（这里面用的是typeof判断） 接下来用instanceof判断是数组还是对象  
   
   
   
   
   
 ，并且将定义的变量赋值为空数组或者空对象 接下来对传进来的参数进行枚举

 

 

 

 

 

 ，对枚举出来的属性进行判断递归

代码：

function deepClone(obj) { if(typeof obj !=="object" || obj == null){ return obj } let res if(obj instanceof Array){ res = [] }else{ res = {} } for(key in obj){ if(obj.hasOwnProperty(key)){ res[key] = deepClone(obj[key]) } } return res }