Detailed explanation of deep and shallow copies of js arrays and objects

This article mainly introduces the deep and shallow copy of arrays and objects in js for everyone. It has certain reference value. Interested friends can refer to it. I hope Meng can help everyone.

Premise: The difference between primitive data types and object types when assigning values

JavaScript data types are divided into primitive data types and object types. The two are stored in different ways in memory, resulting in differences in their assignment. Let’s take a chestnut respectively

var x = 1;
 var y = x; //y获得了和x同样的值
 y = 2;
 console.log(x); // 1

 var m = [1,2]; //m存放的是指向[1,2]这个数组对象的引用地址
 var n = m; //n也获得 [1,2]数组对象的引用地址
 n[0] = 3;
 console.log(m); //[3,2]

It can be seen from the chestnut above: When the original data type is assigned a value, the actual data value is given. After the assignment, the two values ​​are the same. That's it, it won't affect each other; and the object type gives the reference address of the original data, so the old and new data will affect each other, because it is essentially the same data object, such as the array in Shangli

What is a shallow copy?

As the name suggests, shallow copy is a superficial copy method; when the attribute value is an object type, only the reference to the object data is copied, resulting in the old and new data not being completely separated, and they will also interact with each other. Influence. Take another example...

//测试数据
var array1 = ['a',1,true,{name:'lei',age:18}];
 
//concat() slice() 实现浅拷贝
var array2 = array1.concat()
 
//修改拷贝后的数据
array2[0] = 'b';      //array1[0]是原始数据类型 所以是直接赋值的
array2[3].name = 'zhang';  //array1[3]是对象数据类型 所以拷贝的是对象的引用，其实还是和原数组使用同一对象
 
console.log(array1);  // ['a',1,true,{name:'zhang',age:18}]

In the chestnut, array2 is a shallow copy object of array1. The array elements are of primitive data types and will not affect each other (array1[0] ), but array1[3] is an object type and will still affect each other.

How to implement shallow copy

array.concat() or array.slice() in Shangli is a special way to implement shallow copy of array.

How to implement it yourself? Wouldn’t it be enough to traverse each attribute of the object/array and then assign it to a new object? The following implementation

 //实现浅拷贝
 function shallowCopy( target ){
  if(typeof target !== 'object') return ;
  //判断目标类型，来创建返回值
  var newObj = target instanceof Array ? [] : {};
 
  for(var item in target){
   //只复制元素自身的属性，不复制原型链上的
   if(target.hasOwnProperty(item)){
    newObj[item] = target[item]
   }
  }
 
  return newObj
 }</strong>
 
 //测试
 
 var test = [1,&#39;a&#39;,{name:&#39;lei&#39;,age:18}];
 
 var copy = shallowCopy(test);
 console.log(copy[2].name);  //lei
 
 copy[2].name = &#39;zhang&#39;;
 console.log(test[2].name);  //zhang  原数据也被修改

deep copy and its implementation

From the explanation of shallow copy, we can basically understand that deep copy is a 'complete' copy. After copying, the old and new data are completely separated and no longer share the attribute values ​​of the object type and will not affect each other.

Implementation method:

Tricky method JSON.parse(JSON.stringify(Obj))

##

var test = [1,'a',{name:'lei',age:18}]; 
var copy1 = JSON.parse(JSON.stringify(test)); //特殊方式 
console.log(copy1); 
copy1[2].name = 'zhang'
console.log(test);  //[1,'a',{name:'lei',age:18}] 未受到影响

Note: This This method cannot deep copy objects whose attribute values ​​are functions. You can try it yourself

2. Implement deep copy

Shallow copy has been implemented. Think about it. When the object type attribute value is assigned, the result is not complete separation, so we need to modify the way of copying the object type attribute value, and call a deep copy on it again, thus realizing the deep copy, as follows:

//实现深拷贝
function deepCopy( target ){
 if(typeof target !== 'object') return ;
 //判断目标类型，来创建返回值
 var newObj = target instanceof Array ? [] : {};
 
 for(var item in target){
  //只复制元素自身的属性，不复制原型链上的
  if(target.hasOwnProperty(item)){
   newObj[item] = <strong>typeof target[item] == &#39;object&#39; ? deepCopy(target[item]) : target[item] //判断属性值类型
</strong>  }
 }
 
 return newObj
}
 
//测试
var test = [1,&#39;a&#39;,{name:&#39;lei&#39;,age:18}];
 
var copy2 = deepCopy(test);
copy2[2].name = &#39;zhang&#39;
 
console.log(test); ////[1,&#39;a&#39;,{name:&#39;lei&#39;,age:18}] 未受到影响

Summary

Be sure to understand the cause of shallow copy: when copying object type data, the reference address is copied, but the same data is still used Object; so the way to implement deep copy is to recursively deep copy the object type attribute value to avoid direct assignment.

Related recommendations:

jQuery’s $.extend shallow copy and deep copy example analysis

What are js deep copy and shallow copy And its implementation method

Realizing deep copy and shallow copy in jquery

The above is the detailed content of Detailed explanation of deep and shallow copies of js arrays and objects. For more information, please follow other related articles on the PHP Chinese website!