In diesem Beispiel lernen Sie, ein Programm zu schreiben, das ein Objekt klont.
Um dieses Beispiel zu verstehen, sollten Sie die folgenden JavaScript-Programmierthemen kennen:
- JavaScript-Objekte
- JavaScript Object.assign ()
Ein JavaScript-Objekt ist ein komplexer Datentyp, der verschiedene Datentypen enthalten kann. Beispielsweise,
const person = ( name: 'John', age: 21, )
Hier personist ein Objekt. Jetzt können Sie ein Objekt nicht mehr so klonen.
const copy = person; console.log(copy); // (name: "John", age: 21)
Im obigen Programm hat die copyVariable den gleichen Wert wie das personObjekt. Wenn Sie jedoch den Wert des copyObjekts ändern, ändert sich auch der Wert im Objekt person. Beispielsweise,
copy.name = 'Peter'; console.log(copy.name); // Peter console.log(person.name); // Peter
Die Änderung wird in beiden Objekten angezeigt, da Objekte Referenztypen sind . Und beide copyund personzeigen auf dasselbe Objekt.
Beispiel 1. Klonen Sie das Objekt mit Object.assign ()
// program to clone the object // declaring object const person = ( name: 'John', age: 21, ) // cloning the object const clonePerson = Object.assign((), person); console.log(clonePerson); // changing the value of clonePerson clonePerson.name = 'Peter'; console.log(clonePerson.name); console.log(person.name);
Ausgabe
(Name: "John", Alter: 21) Peter John
Die Object.assign()Methode ist Teil des ES6- Standards. Die Object.assign()Methode führt eine Tiefenkopie durch und kopiert alle Eigenschaften von einem oder mehreren Objekten.
Hinweis : Das Leerzeichen ()als erstes Argument stellt sicher, dass Sie das ursprüngliche Objekt nicht ändern.
Beispiel 2: Klonen Sie das Objekt mithilfe der Spread-Syntax
// program to clone the object // declaring object const person = ( name: 'John', age: 21, ) // cloning the object const clonePerson = (… person) console.log(clonePerson); // changing the value of clonePerson clonePerson.name = 'Peter'; console.log(clonePerson.name); console.log(person.name);
Ausgabe
(Name: "John", Alter: 21) Peter John
Die Spread-Syntax … wurde in der späteren Version (ES6) eingeführt.
Die Spread-Syntax kann verwendet werden, um eine flache Kopie eines Objekts zu erstellen. Dies bedeutet, dass das Objekt kopiert wird. Es wird jedoch auf die tieferen Objekte verwiesen. Beispielsweise,
const person = ( name: 'John', age: 21, // the inner objects will change in the shallow copy marks: ( math: 66, english: 73) ) // cloning the object const clonePerson = (… person) console.log(clonePerson); // (name: "John", age: 21, marks: (… )) // changing the value of clonePerson clonePerson.marks.math = 100; console.log(clonePerson.marks.math); // 100 console.log(person.marks.math); // 100
Wenn hier der Wert des inneren Objekts mathauf 100 des clonePersonObjekts geändert wird, ändert sich auch der Wert des mathSchlüssels des personObjekts.
Beispiel 3: Klonen Sie das Objekt mit JSON.parse ()
// program to clone the object // declaring object const person = ( name: 'John', age: 21, ) // cloning the object const clonePerson = JSON.parse(JSON.stringify(person)); console.log(clonePerson); // changing the value of clonePerson clonePerson.name = 'Peter'; console.log(clonePerson.name); console.log(person.name);
Ausgabe
(Name: "John", Alter: 21) Peter John
Im obigen Programm wird die JSON.parse()Methode verwendet, um ein Objekt zu klonen.
Hinweis : Funktioniert JSON.parse()nur mit Numberund StringObjektliteral. Es funktioniert nicht mit einem Objektliteral mit functionoder symbolEigenschaften.
