W tym przykładzie nauczysz się pisać program, który klonuje obiekt.
Aby zrozumieć ten przykład, powinieneś znać następujące tematy programowania JavaScript:
- Obiekty JavaScript
- JavaScript Object. assign ()
Obiekt JavaScript to złożony typ danych, który może zawierać różne typy danych. Na przykład,
const person = ( name: 'John', age: 21, )
Tutaj personjest obiekt. Teraz nie możesz sklonować obiektu, wykonując coś takiego.
const copy = person; console.log(copy); // (name: "John", age: 21)
W powyższym programie copyzmienna ma taką samą wartość jak personobiekt. Jeśli jednak zmienisz wartość copyobiektu, personzmieni się również wartość w obiekcie. Na przykład,
copy.name = 'Peter'; console.log(copy.name); // Peter console.log(person.name); // Peter
Zmiana jest widoczna w obu obiektach, ponieważ obiekty są typami referencyjnymi . I obie copyi personwskazują na ten sam obiekt.
Przykład 1. Sklonuj obiekt za pomocą 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);
Wynik
(imię: „John”, wiek: 21) Peter John
Object.assign()Sposób jest częścią ES6 standard. Że Object.assign()metoda wykonuje głębokie kopiowanie i kopiuje wszystkie właściwości z jednego lub kilku przedmiotów.
Uwaga : Pusty ()jako pierwszy argument gwarantuje, że nie zmienisz oryginalnego obiektu.
Przykład 2: Klonowanie obiektu przy użyciu składni rozkładówki
// 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);
Wynik
(imię: „John”, wiek: 21) Peter John
Składnia rozprzestrzeniania … została wprowadzona w późniejszej wersji (ES6).
Składnia rozkładania może służyć do tworzenia płytkiej kopii obiektu. Oznacza to, że skopiuje obiekt. Jednak istnieją odniesienia do głębszych obiektów. Na przykład,
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
Tutaj, gdy wewnętrzna wartość obiektu mathzostanie zmieniona na 100 wartości clonePersonobiektu, zmienia się również wartość mathklucza personobiektu.
Przykład 3: Klonowanie obiektu przy użyciu 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);
Wynik
(imię: „John”, wiek: 21) Peter John
W powyższym programie JSON.parse()metoda służy do klonowania obiektu.
Uwaga : JSON.parse()działa tylko z literałem obiektu Numberi String. Nie działa z literałem obiektu z właściwościami functionlub symbol.
