AngularJS: Kopieren vs erweitern

Question

Erläuterung:

wir in einigen Situation kommen, in der wir ein Objekt auf ein anderes Objekt kopieren müssen. In diesem Fall haben wir wahrscheinlich zwei Lösungen: angular.copy() oder angular.extend().

Herausforderung, die ich bin vor:

Wie wir wissen angular.copy(source, destination) eine tiefe Kopie des Quellobjekts erzeugt und es zum Ziel zuweisen. Mit dem Schreiben von "Deep Copy" meinen wir, dass eine neue Kopie des referenzierten Objekts erstellt wird und dass es gut funktioniert.

tiefere Kopie Code:

var mySource = {'name' : 'Rohit', 'age' : '24'} 
var myDest = {} 
angular.copy(mySource,myDest); 
mySource.name = "Jindal"; 
console.log(mySource); // Object {name: "Jindal", age: "24"} 
console.log(myDest); // Object {name: "Rohit", age: "24"} 
console.log(mySource.obj === myDest.obj); // false 

Hier ändere ich das Quellobjekt mySource.name = "Jindal" aber es beeinflusst nicht das Zielobjekt myDest wie erwartet. Wenn wir mySource.obj === myDest.obj überprüfen, wird dies false ergeben, da beide auf verschiedene Objekte zeigen.

Nun, ich habe Probleme mit angular.extend(destination, source), da es eine shallow copy bedeutet in diesem sowohl Quelle und Ziel wird auf die gleiche Adresse zeigen. So, if i will modify source object then it will also reflect in destination object. But it's not happening.

flache Kopie Code:

var mySource = {'name' : 'Rohit', 'age' : '24'} 
var myDest = {} 
angular.extend(myDest,mySource); 
mySource.name = "Jindal"; 
console.log(mySource); // Object {name: "Jindal", age: "24"} 
console.log(myDest); // Object {name: "Rohit", age: "24"} 
console.log(mySource.obj === myDest.obj); // True 

jsfiddle: https://jsfiddle.net/U3pVM/24322/

wie ich in diesem neu bin, Hilfe benötigen den richtigen Fluss von angular.copy() & angular.extend zu verstehen ().

Jede sofortige Hilfe wird sehr spürbar sein. Danke

Answer 1

Ich aktualisierte the code. Eckle.extens funktioniert nun wie erwartet. Denken Sie daran, dass wenn Sie angle.extends ein leeres Objekt als ersten Parameter (Ziel) und dann die Quelle übergeben, wird angular beide Objekte beibehalten und nur die Eigenschaften kopieren, genau wie angle.copy.

// angular.copy() 

var mySource = {'name' : 'sakshi', 'age' : '24', 'obj' :{'key':'value'}} 
var myDest = angular.copy(mySource); 

mySource.name = "Rohit"; 
console.log(mySource); // Object {name: "Rohit", age: "24", obj: Object} 
console.log(myDest); // Object {name: "sakshi", age: "24", obj: Object} 
console.log(mySource.obj === myDest.obj); // false 

// angular.extend() 

var mySource = {'name' : 'sakshi', 'age' : '24', 'obj' :{'key':'value'}} 
var myDest = angular.extend(mySource); 
mySource.name = "Rohit"; 
console.log(mySource); // Object {name: "Rohit", age: "24", obj: Object} 
console.log(myDest); // Object {name: "Rohit", age: "24", obj: Object} 
console.log(mySource.obj === myDest.obj); // True 

Answer 2

agular.copy Klone (tiefe Kopie) ein Objekt und erzeugt ein neues Objekt die gleichen Werte verwendet, während angular.extend eine flache Kopie hat, so dass die Attribute gleichen Werte im Speicher verweisen.Eine sehr schöne Erklärung here gegeben, die zwischen .copy(), .extend() und .merge() Methoden

Answer 3

Primitives werden von Wert kopiert statt durch Bezugnahme aber zunächst versuchen, sehr gut differenziert zu verstehen copy vs extend

Kopie

Iteriert jede Eigenschaft eines Objekts, wenn es ein primitives Objekt ist, kopieren Sie es einfach, wenn es ein Objekt ist, erstellen Sie ein neues Objekt und führen Sie eine rekursive Kopie durch

Die Implementierung sieht wie folgt zu beachten, dass offensichtlich gibt es einige weitere Fälle, aber ich halte es einfach

function copy(dest, source) { 
    for (var property in source) { 
    if (typeof source[property] === 'object') { 
     var clone = {} 
     copy(clone, source[property]) 
     dest[property] = clone 
    } else { 
     // a primitive 
     dest[property] = source[property] 
    } 
    } 
} 

Iteriert jede Eigenschaft eines Objekts verlängern, wenn es sich um eine primitive ist einfach kopieren Sie es, wenn es sich um ein Objekt erstellen einen Verweis auf das Objekt ist, anstatt ein neues Objekt zu schaffen, die die gleichen Bezugszeichen wie das ursprüngliche Objekt hat

function extend(dest, source) { 
    for (var property in source) { 
    dest[property] = source[property] 
    } 
} 

Vielleicht sind Sie expectin g, wenn Sie eine flache Kopie Primitiven tun auch flach kopiert werden aber wie Sie sehen oben sie immer geklont sind, Ihr Problem zu lösen Sie stattdessen Eigenschaften eines referenzierten Objekts (erreicht mit einer flachen Kopie)

var mySource = {person: {'name' : 'Rohit', 'age' : '24'}} 
var myDest = {} 
angular.extend(myDest,mySource); 
mySource.person.name = "Jindal"; 
console.log(mySource); // Object {person: {name: "Jindal", age: "24"}} 
console.log(myDest); // Object {person: {name: "Jindal", age: "24"}} 
console.log(mySource.obj === myDest.obj); // True 

ändern sollte

Answer 4

Für die Kopie des Objekts die folgenden Dinge erfüllt.

• Objektpunkte auf denselben Speicherplatz oder nicht

  • Normale Kopie - Ja
  • Angular Kopie - Keine
  • Angular verlängern - Keine
  • Angular merge - Keine

• Inner-Objekt auf den gleichen Speicherplatz oder nicht

  • Normale Kopie - Ja
  • Angular Kopie - Keine
  • Angular verlängern - Kein
  • Angular merge - Keine

• Behält Kopie die aktuellen untergeordneten Objekte oder entfernt diese Objekte

  • Normale Kopie - außer Kraft setzen
  • Angular Kopie - außer Kraft setzen
  • Angular verlängern - Halten
  • Angular merge - Halten

Hier ist die plunker Kopie für die

// '=' assignment copy 
console.info('assignment copy'); 
var mySource = {'name' : 'sakshi', 'age' : '24', 'obj' :{'key':'value'}} 
var myDest = {oldObj:'old'} //old properties will be override 
myDest = mySource; 
mySource.name = "Rohit"; 
console.log(mySource); // Object {name: "Rohit", age: "24", obj: Object} 
console.log(myDest); // Object {name: "sakshi", age: "24", obj: Object} 
console.log(mySource === myDest); // true   //points to same object 
console.log(mySource.obj === myDest.obj); // true //points to same object 


// angular.copy() 
console.info('angular copy'); 
var mySource = {'name' : 'sakshi', 'age' : '24', 'obj' :{'key':'value'}} 
var myDest = {oldObj:'old'} //old properties will be override 
angular.copy(mySource,myDest); 
mySource.name = "Rohit"; 
console.log(mySource); // Object {name: "Rohit", age: "24", obj: Object} 
console.log(myDest); // Object {name: "sakshi", age: "24", obj: Object} 
console.log(mySource === myDest); // false //points to different object 
console.log(mySource.obj === myDest.obj); // false //points to different object 

// angular.extend() 
console.info('angular extend'); 
var mySource = {'name' : 'sakshi', 'age' : '24', 'obj' :{'key':'value'}} 
var myDest = {oldObj:'old'} 
angular.extend(myDest,mySource); 
mySource.name = "Rohit"; 
console.log(mySource); // Object {name: "Rohit", age: "24", obj: Object} 
console.log(myDest); // Object {oldObj:'old',name: "sakshi", age: "24", obj: Object} 
mySource.obj.key = '123'; 
console.log(myDest.obj.key); 
console.log(mySource === myDest); // false //points to different object 
console.log(mySource.obj === myDest.obj); // True //points to same object 

// angular.extend() 
console.info('angular merge'); 
var mySource = {'name' : 'sakshi', 'age' : '24', 'obj' :{'key':'value'}} 
var myDest = {oldObj:'old'} 
angular.merge(myDest,mySource); 
mySource.name = "Rohit"; 
console.log(mySource); // Object {name: "Rohit", age: "24", obj: Object} 
console.log(myDest); // Object {oldObj:'old',name: "sakshi", age: "24", obj: Object} 
console.log(mySource === myDest); // false //points to different object 
console.log(mySource.obj === myDest.obj); // false //points to different object