Jak głęboko zaklinować obiekty w JavaScript
Istnieją dwa rodzaje klonów obiektów \ tablic, z których jeden jest płytkie klony a druga istota Głębokie klony.
Do stworzenia Głębokie klony W waniliowym JavaScript musimy użyć połączenie z JSON PARSE () funkcja i JSON STRATION () funkcjonować. W tym poście omówimy, jakie są płytkie klony i głębokie klony, jak tworzyć klony w JavaScript i jak robić głębokie klony.
Płytkie klony kontra głębokie klony
Ilekroć tablica \ obiekt zawierający inny obiekt tablicy \ wewnątrz jest kopiowany z jednej zmiennej do innej zmiennej, elementy tej tablicy \ obiekt nie są kopiowane; raczej wskaźnik odniesienia jest kopiowany do nowej zmiennej, która wskazuje na starą zmienną. Takie kopie są znane jako płytkie kopie lub płytkie klony
Podczas gdy gdy elementy tablicy \ obiekt są kopiowane bezpośrednio (nie ich wskaźnik odniesienia) do nowej zmiennej wraz z zagnieżdżoną tablicą \ obiekt, ten kopia jest znana jako znana jako Głębokie klony lub głębokie kopie.
Objaśnienie za pomocą kodu JavaScript
Są to zaawansowane koncepcje JavaScript, dlatego użyjemy przykładów kodowania, aby wykazać różnicę między płytkim klonowaniem a głębokim klonowaniem. Aby rozpocząć, utwórz tablicę zawierającą różne elementy za pomocą następującego wiersza kodu:
var originalArray = [true, false, 2, „Google”, niezdefiniowany];
Teraz istnieją dwa sposoby klonowania tej tablicy:
- Stosując metodę wycinka
- Korzystając z operatora rozprzestrzeniania
Aby utworzyć klon przy użyciu metody plasterek, użyj następującego wiersza:
var clone1 = oryginał.pokrój (0);
I aby utworzyć klon za pomocą operatora rozprzestrzeniania się, użyj następującego wiersza:
var clone2 = [… originalArray];
Aby sprawdzić, czy nasze elementy zostały skopiowane, czy nie, możemy użyć funkcji dziennika konsoli do wydrukowania oryginalnej tablicy, a także obu naszych klonów:
konsola.log (oryginał);
konsola.log (clone1);
konsola.log (klon2);
Otrzymujemy następujące dane wyjściowe na naszej konsoli:
Aby udowodnić, że są to faktyczne klony, a nie odniesienia oryginalnej tablicy przekazywanej w tych zmiennych, wprowadzimy pewne zmiany w klonach i sprawdź, czy zmiany te wpływają na oryginalną tablicę, czy nie.
clone1 [0] = 1;
clone2 [1] = "hello";
Ponownie wydrukuj wszystkie tablice na konsoli, aby zbadać zmiany za pomocą następujących wierszy:
konsola.log (oryginał);
konsola.log (clone1);
konsola.log (klon2);
Zaobserwujesz następujące dane wyjściowe:
Jak widać, zmiany w tablicach klonów nie wpłynęły na oryginalną tablicę, co oznacza, że inne tablice nie skopiowały odniesienia oryginalnej tablicy.
Weryfikacja płytkich klonów
Widzieliśmy, jak sklonować proste tablice, ale co, jeśli mamy tablicę lub obiekt, który zawiera inną tablicę, rozważ następującą tablicę:
var originalArray = [["Google"]];
Jak widać, mamy tablicę wewnątrz innej tablicy, spróbujmy stworzyć klon tej tablicy za pomocą metody plasterki, którą użyliśmy już w powyższym przykładzie:
var clone = oryginalArray.pokrój (0);
Zrobiliśmy klon tej tablicy w zmiennej „Klon”, Wydrukuj obie te tablice za pomocą funkcji dziennika konsoli:
konsola.log (oryginalArray [0]);
konsola.log (klon [0]);
Powinieneś zobaczyć następujący wynik na konsoli ekranu:
Spróbujmy wprowadzić pewne zmiany w sklonowanej tablicy z następującym wierszem kodu:
klon [0].push („mapy”);
To powinno wprowadzić zmiany tylko w „Klon” tablica, a nie w oryginalnej tablicy, ale tutaj sprawy stają się interesujące. Wydrukuj obie tablice za pomocą funkcji dziennika konsoli:
konsola.log (oryginalArray [0]);
konsola.log (klon [0]);
Powinieneś zobaczyć następujący wynik na konsoli:
Możesz łatwo zaobserwować na powyższym obrazku, który zmianę w sklonowanej tablicy spowodowały zmiany w oryginalnej tablicy. Oznacza to, że jeśli nasz obiekt \ tablica zawiera obiekt \ tablice, klonowanie przechodzi odniesienie do zagnieżdżonych obiektów, tworząc w ten sposób płytki klon.
Głębokie klonowanie w waniliowym JavaScript
Uff… to było wiele rzeczy, aby wyjaśnić jedną koncepcję płytkie klony Ale z drugiej strony są to pojęcia na poziomie zaawansowanym. Aby zrobić głębokie klony za pomocą JavaScript wiele metod, ale większość z nich wymaga nodejs. Aby zrobić głębokie klony w waniliowym JavaScript, musisz użyć kombinacji funkcji JSON PARSE () i funkcji JSON STRATION (). Utwórz tablicę z zagnieżdżoną tablicą w niej z następującym wierszem kodu:
var originalArray = [["Google"]];
Użyj kombinacji JSON PARSE i JSON STRATION () z następującym wierszem:
var deepcLone = JSON.Parse (Json.Stringify (oryginalArray));
Teraz, aby stworzyliśmy nasz klon, musimy go zweryfikować, wydrukując go na konsoli za pomocą funkcji dziennika konsoli:
konsola.log (klon [0]);
Otrzymasz następujący wynik na konsoli:
Teraz spróbujmy zmienić elementy sklonowanej tablicy za pomocą następującego wiersza:
DeepClone [0].push („mapy”);
Ostatnią rzeczą, która pozostała, jest obserwowanie obu tablic na konsoli, aby ustalić, czy zmiana sklonowanej tablicy zmieniła oryginalną tablicę, czy nie:
konsola.log (oryginalArray [0]);
konsola.log (DeepcLone [0]);
Otrzymasz następujący wynik na swojej konsoli:
Na powyższym obrazie można zauważyć, że zmiany w sklonowany tablica nie spowodowała żadnej zmiany w oryginalnej tablicy. Oznacza to, że zagnieżdżone tablice \ obiekty zostały również skopiowane, a nie odniesienie do nowej zmiennej, i dlatego takie klony są nazywane Głębokie klony.
Wniosek
Głębokie klony w waniliowym JavaScript są tworzone przy użyciu kombinacji funkcji JSON parse () i JSON STRATION () podczas analizowania obiektu \ tablica w nowej zmiennej. Wszystko w JavaScript jest obiektem, a kiedy próbujemy skopiować zagnieżdżone obiekty, ich odniesienie do wskaźnika jest kopiowane do nowej zmiennej, a nie kopiowanie elementów zagnieżdżonych tablic \ obiektów. Gdy odniesienie do obiektu jest przekazywane do nowej zmiany obiektu w nowym obiekcie, powodują również zmiany w starym obiekcie, co nie jest bardzo wydajne. To jest powód, dla którego JavaScript dodał sposób tworzenia głębokich klonów.