vue深拷贝数组（vue深拷贝的三种实现方式）

vue深拷贝的三种实现方式：1  
  
  
  
  
  
  
  
、通过递归方式实现深拷贝；2 
  
  
  
  
  
  
  
 、JSON.parse(JSON.stringify(obj))；3


 


 


 


 


 


 


 


 、jQuery的extend方法实现深拷贝  
  
  
  
  
  
  
  
。深拷贝：拷贝的是对象或者数组内部数据的实体                ，重新开辟了内存空间存储数据；浅拷贝：拷贝的是引用类型的指针 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，副本和原数组或对象指向同一个内存；

1 
 
 
 
 
 
 
 
、通过递归方式实现深拷贝

比较全面的深拷贝















，缺点是较为繁琐

function deepClone(obj) { var target = {}; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { if (typeof obj[key] === object) { target[key] = deepClone(obj[key]); } else { target[key] = obj[key]; } } } return target; }

2  
   
   
   
   
   
   
   
 、JSON.parse(JSON.stringify(obj))

满足一般使用场景
  
  
  
  
  
  
  
  ，但无法实现对象中方法(fountion)的深拷贝

let obj = { id: 1, name: 张三, age: 10, } let newObj = JSON.parse(JSON.stringify(obj))

3

 

 

 

 

 

 

 

 、jQuery的extend方法实现深拷贝

var array = [1,2,3,4]; var newArray = $.extend(true,[],array); // true为深拷贝 
  
  
  
  
  
  
  
 ，false为浅拷贝

拓展阅读

vue深拷贝的其他实现方式

1
 

 

 

 

 

 

 

 
、Object.assign(obj1, obj2)

只有一级属性为深拷贝 


 


 


 


 


 


 


 


，二级属性后就是浅拷贝

let obj = { id: 1, name: 张三, age: 10, } let newObj = Object.assign({}, obj)

2                、扩展运算符

只有一级属性为深拷贝
 
 
 
 
 
 
 
 ，二级属性后就是浅拷贝

var obj = { a: 1, b: 2 } var obj1 = {…obj}

3
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 、数组使用数组方法进行深拷贝（concat















、slice）

只有一级属性为深拷贝  
   
   
   
   
   
   
   
 ，二级属性后就是浅拷贝 

 

 

 

 

 

 

 

，如[1,2,3,[1,2,3]]

var arr1 = [1, 2, 3, 4] var arr2 = arr1.concat() var arr3 = arr1.slice(1)