Podsumowanie: w tym samouczku dowiesz się, jak kopiować obiekty w JavaScript, w tym shallow copy I deep copy., Aby skopiować obiekt w JavaScript, masz trzy opcje:

  1. użyj składni spread (...)
  2. użyj Object.assign() metoda
  3. użyj JSON.stringify() I JSON.parse() metody

Poniższe ilustracje ilustrują, jak skopiować obiekt przy użyciu trzech powyższych metod:

zarówno spread (...), jak i Object.assign() wykonują płytką kopię, podczas gdy metody JSON przenoszą głęboką kopię.

Płytka Kopia vs., deep copy

w JavaScript używa się zmiennych do przechowywania wartości, które mogą być prymitywne lub odniesienia. Podczas tworzenia kopii wartości przechowywanej w zmiennej tworzy się nową zmienną o tej samej wartości. Dla pierwotnej wartości, wystarczy użyć prostego przypisania:

Code language: JavaScript (javascript)

i po zmianie wartości skopiowanej zmiennej, wartość oryginału pozostaje taka sama.

Code language: JavaScript (javascript)

Wyjście:

jednak, jeśli użyjesz operatora przypisania dla wartości referencyjnej, nie skopiuje ona wartości., Zamiast tego obie zmienne będą odwoływać się do tego samego obiektu w pamięci:

Code language: JavaScript (javascript)

i kiedy uzyskasz dostęp do obiektu poprzez nową zmienną (copiedPerson) i zmienisz wartość jego właściwości (name), zmienisz wartość właściwości obiektu.

Code language: JavaScript (javascript)

Wyjście: 

Code language: CSS (css)

Głębokie kopiowanie oznacza, że wartość nowej zmiennej jest odłączona od oryginalnej zmiennej, podczas gdy płytka Kopia oznacza, że niektóre wartości są nadal podłączone do oryginalnej zmiennej.,

przykład kopiowania płytkiego

rozważ następujący przykład:

w tym przykładzie:

  • najpierw Utwórz nowy obiekt o nazwieperson.
  • Po Drugie, Sklonuj obiektperson używając metodyObject.assign().
  • Po Trzecie, Zmień imię i adres obiektu copiedPerson.,

tutaj jest wyjście:

jednak, gdy pokażesz wartości obiektu person, zobaczysz, że informacje o adresie uległy zmianie, ale imię:

Code language: JavaScript (javascript)

Wyjście:

powodem jest to, że adres jest wartością referencyjną, podczas gdy imię jest prymitywną wartością. Oba person I copiedPersonodwołują się do różnych obiektów, ale te obiekty odwołują się do tych samych obiektówaddress.,

przykład głębokiego kopiowania

poniższy fragment zastępuje Object.assign() metodą JSON w celu przenoszenia głębokiego kopiowania person obiekt:

wyjście

Code language: CSS (css)

w tym przykład, wszystkie wartości w obiekcie copiedPerson są odłączone od oryginalnego obiektu person. W tym samouczku nauczyłeś się, jak kopiować obiekty w JavaScript za pomocą płytkiej lub głębokiej kopii.

  • czy ten tutorial był pomocny ?
  • YesNo