Σε αυτό το παράδειγμα, θα μάθετε να γράφετε ένα πρόγραμμα που κλωνοποιεί ένα αντικείμενο.
Για να κατανοήσετε αυτό το παράδειγμα, θα πρέπει να γνωρίζετε τις ακόλουθες ενότητες προγραμματισμού JavaScript:
- Αντικείμενα JavaScript
- Object Object.assign ()
Ένα αντικείμενο JavaScript είναι ένας πολύπλοκος τύπος δεδομένων που μπορεί να περιέχει διάφορους τύπους δεδομένων. Για παράδειγμα,
const person = ( name: 'John', age: 21, )
Εδώ, personείναι ένα αντικείμενο. Τώρα, δεν μπορείτε να κλωνοποιήσετε ένα αντικείμενο κάνοντας κάτι τέτοιο.
const copy = person; console.log(copy); // (name: "John", age: 21)
Στο παραπάνω πρόγραμμα, η copyμεταβλητή έχει την ίδια τιμή με το personαντικείμενο. Ωστόσο, εάν αλλάξετε την τιμή του copyαντικειμένου, η τιμή στο personαντικείμενο θα αλλάξει επίσης. Για παράδειγμα,
copy.name = 'Peter'; console.log(copy.name); // Peter console.log(person.name); // Peter
Η αλλαγή φαίνεται και στα δύο αντικείμενα επειδή τα αντικείμενα είναι τύποι αναφοράς . Και τα δύο copyκαι personδείχνουν το ίδιο αντικείμενο.
Παράδειγμα 1. Κλωνοποιήστε το αντικείμενο χρησιμοποιώντας 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);
Παραγωγή
(όνομα: "John", ηλικία: 21) Peter John
Η Object.assign()μέθοδος είναι μέρος του προτύπου ES6 . Η Object.assign()μέθοδος εκτελεί αντιγραφή σε βάθος και αντιγράφει όλες τις ιδιότητες από ένα ή περισσότερα αντικείμενα.
Σημείωση : Το κενό ()ως το πρώτο όρισμα διασφαλίζει ότι δεν θα αλλάξετε το αρχικό αντικείμενο.
Παράδειγμα 2: Κλωνοποιήστε το αντικείμενο χρησιμοποιώντας σύνταξη Spread
// 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);
Παραγωγή
(όνομα: "John", ηλικία: 21) Peter John
Η σύνταξη spread … εισήχθη στην τελευταία έκδοση (ES6).
Η σύνταξη spread μπορεί να χρησιμοποιηθεί για να δημιουργήσετε ένα ρηχό αντίγραφο ενός αντικειμένου. Αυτό σημαίνει ότι θα αντιγράψει το αντικείμενο. Ωστόσο, αναφέρονται τα βαθύτερα αντικείμενα. Για παράδειγμα,
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
Εδώ, όταν η τιμή του εσωτερικού αντικειμένου mathαλλάζει σε 100 του clonePersonαντικειμένου, αλλάζει επίσης η τιμή του mathκλειδιού του personαντικειμένου.
Παράδειγμα 3: Κλωνοποιήστε το αντικείμενο χρησιμοποιώντας το 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);
Παραγωγή
(όνομα: "John", ηλικία: 21) Peter John
Στο παραπάνω πρόγραμμα, η JSON.parse()μέθοδος χρησιμοποιείται για την κλωνοποίηση ενός αντικειμένου.
Σημείωση : JSON.parse()λειτουργεί μόνο Numberκαι Stringκυριολεκτικά αντικείμενο. Δεν λειτουργεί με ένα αντικείμενο κυριολεκτικά με functionή symbolιδιότητες.
