Tablica kopii JavaScript

| | | | | | | | | | | | | | | | | | | | | |

W JavaScript kopiowanie tablicy nie jest tak proste, jak użycie operatora przypisania (=) do utworzenia duplikatu . Jeśli próbowałeś tego wcześniej, zdziwisz się, że zawiera tylko linki do oryginalnej listy. Na czym polega problem?

W tym przewodniku wyjaśnimy, jak skopiować tablicę JavaScript. Przyjrzymy się kodowi trzech strategii kopiowania tablic JavaScript, abyś mógł zacząć kopiować tablice.

Problem z kopiowaniem tablic JavaScript

Na jednym poziomie „ = & Rdquo; Operator tworzy kopię tablicy tablicy w nowej zmiennej . Jednak jest to bardziej wskaźnik niż kopia. Dzieje się tak, ponieważ operator „=" tworzy odwołanie do oryginalnej tablicy. Nie tworzy duplikatu istniejącej tabeli.

Spróbujmy utwórz kopię tablicy za pomocą operatora przypisania bez żadnego innego kodu:

Nasze zwraca kod:

I Wygląda na to, że nasza tabela została skopiowana. „Owoce” zawiera wszystkie wartości ‚Ęã‚Ęã z naszej tablicy „jagody”.

Teraz spróbujmy dodać element do folderu tablicy „owoce”:

Do serii owoców dodaliśmy „Melon”. Następnie wypisujemy w konsoli wartości „owoce” i „jagody”:

Zarówno „owoce”, jak i „jagody” zawierają te same wartości. To dlatego, że technicznie nie sklonowaliśmy naszej zatoki. Właśnie utworzyliśmy odniesienie do tego.

Za każdym razem, gdy manipulujemy tablicą „berries” , zmiany zostaną wprowadzone w polu tablicy „fruits” .

Jak skopiować tablicę JavaScript

Operator przypisania nie kopiuje tablicy. Musimy zastosować inne podejście. Na szczęście dla nas istnieje wiele sposobów na wykonanie kopii obrazu. Trzy główne podejścia to:

Pójdźmy przedyskutuj to jeden po drugim.

Używanie operatora rozsunięcia

Operator rozsunięcia to funkcja wprowadzona w JavaScript ES6. Zapewnia dostęp do treści z . an iterable Ten operator jest często używany do utwórz płytką kopię tablicy

Rozkładanie operatora ma trzy punkty jako elipsę (& hellip;). Stwórzmy kopię naszej tablicy „jagody” sprzed:

Użyliśmy operatora spread do utworzenia kopii naszej tablicy. Sprawdzamy wartości ‚Ęã‚ãw naszych tablicach t o upewnij się, że są poprawne:

Nasz kod zwraca:

Wartość & bdquo; Melon „Został dodany tylko do „owoców” Carrier. W rzeczywistości użyliśmy operatora transmisji do utworzenia duplikatu wektora „jagody”. Teraz tabela „owoce” jest osobną tabelą. Jego wartości są oddzielone tabelami „jagody” .

za pomocą pętli

sprawdzone, użycie pętli for jest dobrym sposobem na utworzenie kopii obrazu .

To metoda może nie być preferowana jako operator propagacji, ponieważ wymaga wielu wierszy kodu. Jednak pętla for kopiuje obiekt.

Zadeklarowaliśmy dwie listy: jagody i owoce. Owoce jest początkowo pustą listą. Użyliśmy więc pętli for do iteracji wszystkich elementów l iste „berries” . Dla każdego elementu na liście wartość jest kopiowana do folderu tablicy „fruit” .

Uruchommy test, aby sprawdzić, czy nasze tablice są oddzielone:

Nasz kod zwraca:

Sukces! „Jagody” i „owoce” to dwie osobne tabele.

Korzystanie z Array.from()

Metoda Array.from () zamienia dowolny obiekt iterowalny w tablicę. przez każdy element iterowalnego i dodaje go do nowej tablicy. Oznacza to, że można go użyć do skopiowania tablicy.

Powinieneś ponownie utwórz kopię naszej tablicy "berries":

To rozwiązanie, podobnie jak składnia operatora spread, wymaga tylko dwóch linii kodu. Jest to wydajne i zwięzły sposób na skopiowanie tabeli.Teraz chodźmy; s uruchom test, aby sprawdzić nasze nowe tablice:

Nasz kod zwraca:

Nasze tabele zostały pomyślnie skopiowane.

Wniosek

Kopiowanie tablicy w JavaScript jest łatwe, jeśli wiesz, jak to zrobić.

Operator przypisania nie wystarcza do skopiowania tablicy, jeśli chcesz utworzyć oddzielną wersję tablica. Dzieje się tak, ponieważ operator przypisania tworzy wskaźnik do istniejącej tablicy; nie tworzy nowej tabeli.

Możesz utworzyć kopię tablicy za pomocą operatora rozprzestrzeniania, pętli for lub metody Array.from () . Jesteś teraz gotowy do kopiowania tabel w JavaScript jak ekspert.