Jak skopiować elementy tablicy w JavaScript

JavaScript oferuje różne metody dla Kopiowanie elementów tablicy. Tablice w JavaScript mogą zawierać obiekty, odniesienia i wartości prymitywne. Gdy masz prymitywny rodzaj danych, zadanie kopiowania elementów tablicy jest dość proste; Jednak jeśli chodzi o obiekty i referencje, musisz wybrać między Płytki I Głębokie kopiowanie Procedury ostrożnie.

Gdy w tablicy istnieją odniesienia, płytka kopia tylko kopiuje adresy odniesienia. Tak więc, jeśli wprowadzisz pewne zmiany w jednej kopii, modyfikacja będzie również odzwierciedlała w drugiej kopii; W miarę udostępniania lokalizacji pamięci. Możesz sklonować elementy tablicy za pomocą głębokiego kopiowania, aby uniknąć tej sytuacji.

W tym spisie omówi metody kopiowania elementów tablicy w JavaScript za pomocą odpowiednich przykładów.

Jak skopiować elementy tablicy w JavaScript

Tablice JavaScript są uważane za jako Typy referencyjne Co oznacza, że ​​jeśli przypiszesz jedną tablicę do innej tablicy za pomocą operatora przypisania „=”, Przypisuje tylko odniesienie oryginalnej tablicy i nie będzie kopiować elementów tablicy.

Po przypisaniu odniesienia, po dodaniu lub modyfikowaniu elementów drugiej tablicy, zostanie również dotknięta pierwszymi elementami tablicy. Możesz lepiej zrozumieć za pomocą następującego przykładu:

Przykład

Na przykład stworzyliśmy tablicę o nazwie „ptaki„Posiadanie następujących elementów:

var birds = [„papuga”, „crow”];

W następnym kroku spróbujemy przypisać „ptaki" do "nowicjudy„Tablica za pomocą„=" operator przypisania:

var newbirds = ptaki;
konsola.log (newbirds);

Następnie dodamy nowy element do „nowicjudy„Tablica za pomocą metody JavaScript push ():

nowicjudy.push („gołąb”)

Na koniec wyświetlimy elementy „ptaki" I "nowicjudy„Elementy tablicy w oknie konsoli:

konsola.log (ptaki);
konsola.log (newbirds);

Poniżej podana wyjście oznacza, że ​​kiedy skopiował „ptaki„Elementy tablicy za pomocą operatora przypisania„=”, Zmiany wprowadzone później są stosowane do obu tablic:

W tym momencie zrozumiałeś, że tablice są uważane za wartości odniesienia w JavaScript, więc kiedy korzystasz z operatora przypisania, zostanie skopiowane tylko odniesienie oryginalnej tablicy, a nie elementów tablicy.

W JavaScript możesz użyć „Płytka kopia" Lub "Głęboka kopia„Metody kopiowania elementów tablicy. Czy te terminy brzmią dla Ciebie nowe? Bez obaw! Wyjaśnimy je w następnych sekcjach.

Płytka kopia w JavaScript

Butowa kopia obiektu nazywa się płytką kopią.

• W płytkiej kopii tworzony jest nowy obiekt o dokładnej kopii określonych wartości obiektów.
• Płytka kopia służy najczęściej do kopiowania elementu pierwszego poziomu, co oznacza, że ​​możesz sklonować tylko elementy jednowymiarowej lub 1d tablica.
• Jeśli oryginalny obiekt zawiera jakiekolwiek odniesienia, wówczas tylko adresy odniesienia zostaną skopiowane.

Operator rozprzestrzeniania […], plasterek(), I conat () Metody umożliwiają płytkie elementy tablicy kopii w JavaScript.

Głęboka kopia w JavaScript

Jeśli chcesz skopiować elementy wielowymiarowej tablicy, musisz wykonać operację głębokiego kopiowania, aby skopiować oryginalne elementy tablicy.

Termin "Głęboka kopia”Odnosi się do procedury kopiowania rekurencyjnego. Najpierw tworzy nową kolekcję obiektów, a następnie rekurencyjnie kopiuje określone elementy tablicy. Możemy więc powiedzieć, że w przypadku głębokiej kopii kompletna tablica JavaScript jest skopiowana lub sklonowana do innej tablicy, i kopiuje pierwszy poziom i wszystkie zagnieżdżone elementy wielowymiarowej tablicy.

JSON.stringify () I JSON.analizować() Metody są wykorzystywane do kopiowania wielowymiarowej tablicy, w której JSON.metoda stringify () przekonwertuje określony obiekt na ciąg, który można przekonwertować na tablicę za pomocą JSON.metoda parse ().

Teraz sprawdźmy kilka praktycznych przykładów kopiowania tablic pojedynczych i wielowymiarowych za pomocą wymienionych metod płytkich i głębokich kopii.

Jak kopiować elementy tablicy w JavaScript za pomocą operatora rozprzestrzeniania się

W JavaScript „The„rozpowszechnianie się„Operator może być używany do kopiowania lub rozpowszechniania elementów tablicy. Trzy kolejne kropki ”… ”Reprezentuj operatora rozprzestrzeniania. Pamiętaj, że operator rozprzestrzeniania się skopiuje elementy tablicy tylko na poziomie pierwszym, a zagnieżdżone elementy są przekazywane jako odniesienia.

Składnia operatora rozprzestrzeniania do elementu tablicy kopiowania

var array2 = [… array1];

Tutaj operator rozprzestrzeniania się skopiuje elementy „Array1" Do "Array2".

Przykład: Jak kopiować elementy tablicy w JavaScript za pomocą operatora rozprzestrzeniania się

Przede wszystkim stworzymy nową tablicę o nazwie „ptaki„Posiadanie dwóch elementów:„Papuga" I "Wrona”:

var birds = [„papuga”, „crow”];

Następnie skopiujemy „ptaki„Elementy tablicy do„nowicjudy"Tablica:

var newbirds = [… ptaki];
konsola.log (newbirds);

Dodatkowo możesz sprawdzić, czy dodanie nowego elementu w „nowicjudy„Tablica zmodyfikuje„ptaki„Tablica czy nie:

nowicjudy.push („gołąb”)
konsola.log (newbirds);
konsola.log (ptaki);

Jak widać z wyjścia, pomyślnie skopiowaliśmy „ptaki„Elementy tablicy do„nowicjudy„Tablica i popychanie nowych elementów do„nowicjudy”Nie zastosował żadnych zmian w„ptaki"Tablica:

Jak skopiować elementy tablicy w JavaScript za pomocą metody slice ()

Metoda JavaScript slice () jest wykorzystywana do kopiowania elementów tablicy do innego obiektu lub tablicy. Oryginalna tablica nie zostanie zmodyfikowana w przypadku metody zastosowania metody slice ().

Składnia metody slice () do kopiowania elementów tablicy

var array2 = array1.plasterek();

Zgodnie z składnią metoda slice () skopiuje elementy „Array1" W "Array2".

Przykład: Jak kopiować elementy tablicy w JavaScript za pomocą metody slice ()

W poniższym przykładzie skorzystamy z „plasterek()„Metoda kopiowania„ptaki„Elementy tablicy do„nowicjudy"Tablica:

var birds = [„papuga”, „crow”];
var newbirds = ptaki.plasterek();
konsola.log (newbirds);

Teraz popychanie nowych elementów w „nowicjudy„Tablica nie zmodyfikuje„ptaki"Tablica:

nowicjudy.push („gołąb”)
konsola.log (newbirds);
konsola.log (ptaki);

Oto dane wyjściowe, które otrzymaliśmy z realizacji powyższego programu:

Z powyższego wyjścia można wyraźnie zobaczyć, że dodanie elementów w „nowicjudy„Tablica nie wpłynęła na elementy„ptaki- tablica.

Jak kopiować elementy tablicy w JavaScript za pomocą metody concat ()

"conat ()”To kolejna przydatna metoda JavaScript, która może pomóc w kopiowaniu elementów tablicy. W metodzie Concat () możesz wziąć pustą tablicę i skopiować do niej oryginalne elementy tablicy. Utworzy świeżą kopię określonej tablicy.

Składnia metody conat () do kopiowania elementów tablicy

var array2 = [].conat (array1);

W powyższej składni metoda conat () skopiuje „Array1„Elementy w pustej tablicy [], a następnie wynik będzie przechowywany w„Array2".

Przykład: Jak kopiować elementy tablicy w JavaScript za pomocą metody conat ()

Teraz użyjemy JavaScript „conat ()„Metoda kopiowania elementów„ptaki„Tablica do„nowicjudy”:

var birds = [„papuga”, „crow”];
var newbirds = [].Conat (ptaki);
konsola.log (newbirds);

Następnie będziemy naciskać nowe elementy „to”nowicjudy„Tablica i sprawdź, czy aktualizuje„ptaki„Tablica również:

nowicjudy.push („gołąb”)
konsola.log (newbirds);
konsola.log (ptaki);

Spójrz na dane wyjściowe poniżej:

Jak widać na wyżej oddanej wydajności, pchając nowe elementy w „nowicjudy„Tablica nie zmodyfikowała„ ”ptaki- tablica.

Jak skopiować wielowymiarowe elementy tablicy w JavaScript

Jeśli chcesz skopiować elementy z tablicy wielowymiarowej, możesz użyć JSON.Stringify () i JSON.metody parse (). JSON.metoda stringify () przekonwertuje określony obiekt na ciąg, który można następnie przekonwertować na tablicę za pomocą JSON.metoda parse ().

Składnia do kopiowania wielowymiarowych elementów tablicy

var array2 = json.Parse (Json.stringify (array1));

Po pierwsze, „JSON.stringify ()„Metoda przekonwertuje”Array1„Aby sznurować, a następnie przeanalizować go do tablicy (obiektu) za pomocą„JSON.analizować()" metoda. Zwracane elementy tablicy zostaną następnie skopiowane do „Array2".

Przykład: Jak skopiować wielowymiarowe elementy tablicy w JavaScript

W tym przykładzie użyliśmy JSON.Stringify () i JSON.parse () metody kopiowania elementów wielowymiarowych ”ptaki„Tablica do„nowicjudy”:

var birds = [name: 'Parrot', name: 'crow'];
var newbirds = json.Parse (Json.stringify (ptaki));
konsola.log (newbirds);

Powyższe dane wyjściowe oznacza, że ​​pomyślnie skopiowaliśmy elementy „ptaki„Tablica do„nowicjudy".

Wniosek

Operator rozprzestrzeniania „[…]”, plasterek(), I conat () Metody pozwalają na to płytki Kopiuj 1d elementy tablicy w JavaScript i dla głęboko Kopiowanie wielowymiarowych tablic, JSON.stringify () I JSON.analizować() Metody są wykorzystywane, gdzie JSON.metoda stringify () przekonwertuje określony obiekt na ciąg, który można następnie przeanalizować na tablicę z JSON.metoda parse (). W tym spisie omówiono metody kopiowania elementów tablicy w JavaScript.