Detaillierte Erläuterung der tiefen und flachen Kopien von js-Arrays und -Objekten

Dieser Artikel stellt hauptsächlich die tiefe und flache Kopie von Arrays und Objekten in js vor. Ich hoffe, dass interessierte Freunde Ihnen helfen können.

Prämisse: Der Unterschied zwischen primitiven Datentypen und Objekttypen beim Zuweisen von Werten

JavaScript-Datentypen werden in primitive Datentypen und Objekttypen unterteilt. Beide werden auf unterschiedliche Weise im Gedächtnis abgelegt, wodurch sich Unterschiede in der Zuordnung ergeben. Nehmen wir jeweils eine Kastanie

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]

Aus der Kastanie oben geht hervor: Wenn der ursprüngliche Datentyp zugewiesen wird, wird der tatsächliche Datenwert angegeben Nach der Zuweisung Die beiden Werte sind einfach gleich und beeinflussen sich nicht gegenseitig. Der Objekttyp gibt die Referenzadresse der Originaldaten an, sodass sich die alten und neuen Daten gegenseitig beeinflussen, da es sich im Wesentlichen um dieselben Daten handelt Objekt, wie das Array in Shangli

Was ist flache Kopie?

Wie der Name schon sagt, handelt es sich bei der flachen Kopie um eine oberflächliche Kopiermethode. Wenn der Attributwert ein Objekttyp ist, wird nur der Verweis auf die Objektdaten kopiert, was zu Alt und Neu führt Die Daten sind nicht vollständig getrennt und sie beeinflussen sich auch gegenseitig. Nehmen wir ein anderes Beispiel...

//测试数据
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 der Kastanie ist Array2 ein flaches Kopierobjekt von Array1. Die Array-Elemente sind von primitiven Datentypen und haben keine Auswirkungen einander (array1[ 0]), aber array1[3] ist ein Objekttyp und beeinflusst sich weiterhin gegenseitig.

So implementieren Sie eine flache Kopie

Array.concat() oder array.slice() in Shangli ist eine besondere Möglichkeit, eine flache Kopie eines Arrays zu implementieren.

Wie kann man es selbst umsetzen? Würde es nicht ausreichen, jedes Attribut des Objekts/Arrays zu durchlaufen und es dann einem neuen Objekt zuzuweisen? Wie folgt implementieren:

 //实现浅拷贝
 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 und seine Implementierung

Aus der Erklärung von Shallow Copy lässt sich grundsätzlich verstehen, dass Deep Copy eine „vollständige“ Kopie ist. Nach dem Kopieren sind die alten und neuen Daten vollständig getrennt und teilen sich nicht mehr die Attributwerte des Objekttyps und beeinflussen sich nicht gegenseitig.

Implementierungsmethode:

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}] 未受到影响

Hinweis : Diese Methode kann keine Objekte tief kopieren, deren Attributwerte Funktionen sind. Sie können es selbst versuchen

2. Implementieren Sie Deep Copy

Wir haben bereits flaches Kopieren implementiert. Denken Sie darüber nach, dass beim Zuweisen von Werten zu Objekttypattributen eine unvollständige Trennung erforderlich ist. Daher müssen wir die Methode zum Kopieren von Objekttypattributwerten ändern und erneut eine tiefe Kopie aufrufen. wie folgt:

//实现深拷贝
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}] 未受到影响

Zusammenfassung

Stellen Sie sicher, dass Sie die Ursache für flache Kopien verstehen: beim Kopieren von Objekten Typdaten, die Referenzadresse wird kopiert, wobei es sich immer noch um dasselbe Datenobjekt handelt. Die Methode zum Implementieren einer tiefen Kopie besteht darin, den Attributwert des Objekttyps rekursiv tief zu kopieren, um eine direkte Zuweisung zu vermeiden.

Verwandte Empfehlungen:

JQuerys $.extend Shallow Copy und Deep Copy Beispielanalyse

Was sind js Deep Copy und Shallow Copy? Und seine Implementierungsmethode

Deep Copy und Shallow Copy in JQuery realisieren

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der tiefen und flachen Kopien von js-Arrays und -Objekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!