Płytka kopia vs głęboka kopia w JavaScript

Zadanie kopiowania w JavaScript jest dość proste dla prymitywnych typów danych. Musisz jednak starannie wybrać między Płytka i głęboka kopia techniki podczas obsługi obiektów i referencji.

W Tylko w płytkiej kopii Adresy odniesienia są kopiowane; Dlatego zmiana jednego obiektu zastosuje te same zmiany w innym obiekcie. Aby uniknąć takiej sytuacji, możesz skorzystać z procedury głębokiej kopii.

Ten post wyjaśni koncepcję płytkiej kopii i głębokiej kopii przy użyciu odpowiednich przykładów. A więc zacznijmy!

Płytka kopia w JavaScript

Mechanizm, w którym obiekt jest skopiowany do określonego obiektu, jest znany jako płytka kopia.

• Metoda płytkiej kopii wkleja dokładną kopię określonego obiektu do innego obiektu.
• Jest wykorzystywany przede wszystkim do kopiowania jednowymiarowych elementów tablicy, w których kopiuje tylko elementy obecne na pierwszym poziomie.
• Kopiuje tylko adresy odniesienia do innego obiektu.

Metody płytkiej kopiowania obiektu w JavaScript

Aby skopiować obiekt JavaScript do innego obiektu, możesz użyć następujących metod:

• Obiekt.metoda przypisania ()
• Operator rozprzestrzeniania […]
• Operator przypisania „=”

Notatka: Jeśli korzystasz „Operator rozprzestrzeniania” lub „Obiekt.przydzielać()" Metoda, a następnie po płytkim kopiowaniu, skopiowany obiekt zostaje odłączony od oryginalnego obiektu, podczas gdy w przypadku używania „zadanie”Operator, zmiana skopiowanego obiektu zmodyfikuje również oryginalny obiekt.

Krótko omówimy każdą z wymienionych metod płytkiej kopiowania obiektu w JavaScript.

Płytka kopia obiekt w JavaScript za pomocą operatora rozprzestrzeniania

„„rozpowszechnianie się„Operator może być wykorzystywany do płytkiego kopiowania obiektu. Jest reprezentowany jako trzy kolejne kropki „…”.

Składnia używania operatora rozprzestrzeniania się do płytkiej kopii obiektu w JavaScript

niech Object2 = … Object1;

Tutaj operator spreadu skopiuje parę wartości kluczowej „Object1” do „Object2”.

Przykład: płytka kopia obiekt w JavaScript za pomocą operatora rozprzestrzeniania

Przede wszystkim utworzymy obiekt o nazwie „pracownik„Posiadanie dwóch par kluczowych:

const pracownika =
Nazwa: „Alex”,
Oznaczenie: „Menedżer”
;

Następnie skopiujemy płytkie skopiowanie „pracownik„Ob sprzyja nowo utworzonemu”EMP1„Obiekt za pomocą operatora rozprzestrzeniania:

Niech emp1 = … pracownik;

Dodatkowo możesz sprawdzić, czy modyfikowanie wartości właściwości „EMP1„Obiekt może również wpływać na„pracownik„Właściwość imienia obiektu:

EMP1.name = „max”;

konsola.Log („Nazwa EMP1:” + emp1.nazwa);

konsola.Log („Nazwa pracownika:” + pracownik.nazwa); [/cc]

Z powodzeniem skopiowaliśmy „pracownik”Obciekanie„EMP1„Obiekt i modyfikowanie„EMP1.nazwa„Wartość nieruchomości nie zastosowała żadnych zmian w„pracownik.nazwa" nieruchomość:

Płytka kopia w JavaScript za pomocą obiektu.metoda przypisania ()

JavaScript „Obiekt.przydzielać()„Metoda jest wykorzystywana do płytkiej kopii„kluczowa wartość”Para już utworzonego obiektu w inny obiekt. Oryginalny obiekt nie będzie miało wpływu na korzystanie z obiektu.metoda przypisania ().

Składnia używania obiektu.metoda przypisania () do płytkiej kopii w JavaScript

Obiekt.przypisz (cel, źródło)

Tutaj, "cel”Reprezentuje obiekt JavaScript, którego para kluczowej zostanie skopiowana i„źródło”Wskazuje obiekt, w którym zostanie umieszczona skopiowana para wartości kluczowej.

Przykład: płytka kopia w JavaScript za pomocą obiektu.metoda przypisania ()

Wzywamy „„Obiekt.przydzielać()„Metoda płytkiego kopiowania „Pracownik” obiekt „EMP1”:

Niech emp1 = ; obiekt.przypisanie (emp1, pracownik);

„„Obiekt.przydzielać()„Metoda zwróci obiekt docelowy, czyli„EMP1" w naszym przypadku:

Następnie zaktualizujemy „emp.nazwa" wartość nieruchomości:

EMP1.name = „Stepheny”; konsola.Log („Nazwa EMP1:” + EMP1.nazwa);
konsola.Log („Pracownik.Nazwa: " + pracownik.nazwa);

Jak widać na poniższej wydajności, zmieniając „emp.nazwa„Wartość właściwości nie zmodyfikowała„ „pracownik" obiekt.

Płytka kopia w JavaScript za pomocą operatora przypisania

Operator zadania „=”Może również pomóc w płytkim kopiowaniu obiektu w JavaScript. W przypadku korzystania z operatora przypisania obie zmienne będą odnosić się do tego samego obiektu. Zmiany w jednym obiekcie wpłyną również na wartość właściwości odpowiedniego obiektu:

Składnia używania operatora przypisania do płytkiej kopii w JavaScript

Object2 = Object1

Tutaj operator przypisania kopiuje „Object1” do „Object2”.

Przykład: płytka kopia w JavaScript za pomocą operatora przypisania

Teraz użyjemy operatora przypisania JavaScript do płytkiego kopiowania „Pracownik” obiekt „EMP1”:

Niech emp1 = ; emp1 = pracownik;

W następnym kroku określamy „Stepheny”Jako wartość„EMP1.nazwa" nieruchomość:

EMP1.name = „Stepheny”; konsola.Log („Nazwa EMP1:” + EMP1.nazwa);
konsola.Log („Pracownik.Nazwa: " + pracownik.nazwa);

Dane wyjście oznacza, że ​​zmiana „emp.nazwa”Wartość właściwości nie zmodyfikowała „Pracownik” obiekt „Nazwa” nieruchomość:

Teraz omówimy koncepcję głębokiej kopii obiektu w JavaScript.

Głęboka kopia w JavaScript

"Głęboka kopia”Jest rekurencyjną procedurą kopiowania obiektu. Ten mechanizm tworzy nowy obiekt, a następnie klonuje do niego parę kluczowej wartości określonego obiektu. To stwierdzenie oznacza, że ​​podczas głębokiego kopiowania obiekt JavaScript jest całkowicie sklonowany do innego obiektu. Następnie skopiowany obiekt zostaje odłączony od oryginalnego obiektu.

Metody głębokiego kopiowania obiektu w JavaScript

Metody wykorzystywane do głębokiego kopiowania obiektu JavaScript są JSON.Stringify () i JSON.analizować(), gdzie metoda Stringify () przekształca określony obiekt JavaScript w ciągu, a następnie metoda parse () wykonuje operację parsowania i zwraca obiekt.

Składnia używania JSON.Stringify () i JSON.parse () metody głębokiego kopiowania obiektu w JavaScript

Niech Object2 = Json.Parse (Json.stringify (object1));

Tutaj Stringify () MetoD przekształca JavaScript „obiekt1„Do ciągu, a następnie metoda parse () wykonuje operację parsowania i zwroty, które będą przechowywane w„obiekt2".

Przykład: głęboka kopia w JavaScript Obiekt w JavaScript za pomocą JSON.Stringify () i JSON.metody parse ()

W tym przykładzie użyliśmy metody stringify () i parse () kopiować „Pracownik” do „EMP1” obiekt. „„JSON.stringify ()„Metoda przekonwertuje„pracownik„Przejmij do„strunowy”A potem„JSON.analizować()„Metoda parsuj wynikowy ciąg i zwróć obiekt JavaScript:

Niech pracownik =
Nazwa: „Alex”,
Adres: City: „Ankara”, kraj: „Turcja”
;
var emp1 = json.Parse (Json.stringify (pracownik));
konsola.log (emp1);

Biorąc pod uwagę wyjście, oznacza, że ​​pomyślnie skopiowaliśmy „Pracownik” obiekt „EMP1”:

Na koniec zmodyfikujemy niektóre właściwości obiektu „EMP1”, a następnie sprawdzimy wynik:

EMP1.name = „max”;
EMP1.adres.miasto = „Stambuł”;
konsola.log ("emp1.Nazwa: " + emp1.nazwa);
konsola.log ("emp1.adres.miasto: „ + emp1.adres.miasto);
konsola.Log („Pracownik.Nazwa: " + pracownik.nazwa);
konsola.Log („Pracownik.adres.miasto: „ + pracownik.adres.miasto);

Po przeprowadzeniu operacji głębokiego kopiowania „„EMP1”Odłącza się od„pracownik,”Tak więc wszelkie zmiany dokonane w„EMP1”Nie wpłynie na„pracownik" obiekt:

W JavaScript opracowaliśmy wszystkie niezbędne informacje związane z płytką kopią i głęboką kopią. Możesz go dalej zbadać zgodnie z Twoimi wymaganiami.

Wniosek

Operator rozprzestrzeniania „[…]”, „Obiekt.scyk () ”i operator„ przypisania ” to metody, które pozwalają ci na to Obiekty płytkich kopii i głębokie kopiowanie obiektu JavaScript, JSON.Stringify () i JSON.metody parse () są używane, gdzie JSON.Metoda stringify () przekształca określony obiekt na ciąg, który jest następnie analizowany za pomocą JSON.metoda parse (). W tym poście wyjaśniono pojęcie płytkiej i głębokiej kopii przy użyciu odpowiednich przykładów.