Podstawy Programowania: Usuwanie elementów tablicy

0:00Skoro można dodawać elementy do tablicy to

0:03zapewne domyślasz się, że można jej również usuwać.

0:06Pokażę Ci teraz jak to zrobić. Utworzymy

0:08sobie tablicę, w której będzie kilka imion np.

0:12Tomek

0:15Kasia

0:17Jacek

0:19i Mariusz.

0:20Czyli mamy tutaj cztery elementy, są to

0:23wartości tekstowe. I teraz jeżeli sobie wyświetlimy ile jest

0:27tutaj elementów czyli arr.length, do tej właściwości się odwołamy,

0:31zauważ, że zwraca nam to cztery bo mamy tutaj cztery elementy.

0:34Teraz co ciekawe tą wartość tutaj arr.length

0:38można przypisać. I wtedy bardzo ciekawie zachowa się tablica, jeżeli byśmy chcieli

0:43skrócić tą tablicę do dwóch elementów czyli usunąć dwa ostatnie to wtedy

0:47moglibyśmy napisać arr.length i powiedzieć, że długość tej tablicy według nas to ma być 2.

0:53I pytanie co się wtedy stanie. Wyświetlmy sobie pod spodem całą tablicę.

0:57Okazuje się, że zostaną tam tylko dwa elementy.

1:00Czyli jeżeli ręcznie można powiedzieć, że

1:02przypiszemy długość 2 to zostaną tylko dwa pierwsze

1:06a jeżeli byśmy pisali 0 to byśmy wyczyścili taką tablicę.

1:10Jeżeli chodzi o takie przypisanie nie

1:12często się z tego korzysta bo są lepsze sposoby na usuwanie

1:15konkretnych elementów z tablicy natomiast gdybyś chciał tablicę zzerwać to dobrym

1:19pomysłem jest rzeczywiście przypisanie arr.length na zero.

1:23Teraz co by się stało gdybyśmy, to

1:25wykomentujemy oczywiście żeby to się nie działo, gdybyśmy chcieli usunąć Jacka. To

1:29wiemy, że Jacek jest pod drugim indeksem bo pamiętaj 0 to jest

1:32pierwsze miejsce 1, 2. Czyli Jacek znajduje się pod indeksem 2

1:38i teraz możemy skorzystać w języku JavaScript ze specjalnego słowa kluczowego delete

1:43i odwołać się do arr 2. Czyli odwołujemy się do drugiego indeksu.

1:47Zauważ co się wtedy stanie.

1:49Otóż stworzyliśmy

1:51tablicę tak naprawdę bo ją zmodyfikowaliśmy, w której mamy Tomek, Kasia,

1:55potem tutaj jest napisane 1 empty item czyli, że nic tutaj nie ma i Mariusz

2:00i tak to wygląda. Wydaje się, że tam jest po prostu pusto

2:03ale gdybyśmy konkretnie się chcieli odwołać do tego teraz arr 2

2:08to zwróci nam tą wartość undefined.

2:09Czyli tak naprawdę ta tablica się nie skróciła dlatego ten delete też nie

2:14jest tak do końca najlepszym pomysłem bo my byśmy chcieli usunąć Jacka w ten sposób

2:18żeby tablica wyglądała tak. A więc aby Mariusz się przesunął w lewo.

2:23W tym przypadku ta tablica nadal jest

2:25takiej samej długości tylko, że jedna z jej wartości przyjęła wartość undefined.

2:29Więc to jest też jakiś sposób ale nie jest to do końca dobry sposób.

2:33Zatem jaki jest najlepszy sposób na usunięcie konkretnego elementu z tablicy

2:37w przypadku języka JavaScript, bo pamiętaj, że

2:39w innych językach troszeczkę inaczej może to wyglądać.

2:42Otóż mamy taką metodę tak jak mieliśmy

2:44metodę push czy unshift to mamy również metodę, która nazywa się splice.

2:49I teraz ona wygląda tak arr.splice

2:53i tutaj musimy podać indeks, od którego chcemy zacząć.

2:56Więc jeżeli chcemy usunąć Jacka, on jest pod drugim indeksem bo 0 1 2 to mówimy

3:01zaczynamy usuwanie z tej tablicy pod indeksem 2 a po przecinku podajemy drugi

3:07parametr do tej funkcji i mówimy ile elementów chcemy usunąć.

3:11Więc jeżeli zaczynam od Jacka i chcę tylko

3:13jego usunąć to podam tutaj jedynkę, chce usunąć tylko jedną

3:17rzecz z tej tablicy i od razu widzimy pod spodem, że teraz pod indeksem drugim

3:22znajduje się Mariusz a cała tablica wygląda w taki sposób Tomek, Kasia, Mariusz.

3:27Czyli skutecznie usunęliśmy Jacka a te elementy, które jakby były z prawej jego

3:31strony przesuneliśmy tutaj i ta tablica teraz będzie miała length czyli długość

3:35trzech elementów. A więc tak to wygląda natomiast gdybyśmy chcieli usunąć i Jacka i

3:40Mariusza, tu byśmy mogli podać to w ten sposób.

3:43Wtedy zostanie tylko Tomek oraz Kasia.

3:45Natomiast zazwyczaj potrzebujemy usunąć jeden element z tablicy i to w jakiś

3:49dynamiczny sposób go również wyszukuje jaki jest jego indeks.

3:53Nie musisz się na razie tym martwić niekoniecznie będziemy wpisywać ręcznie

3:56dwójkę ale pod jakąś zmienną będziemy mogli mieć zapisaną dwójkę, trójkę czy

4:00wartość 50 i w ten sposób będziemy chcieli jakiś element usunąć.

4:04Więc metoda splice w tym przypadku będzie

4:06najlepsza. I będę chciał Ci na koniec pokazać jeszcze dwie fajne metody.

4:12Pierwsza z nich jest to metoda, która służy do usunięcia ostatniego elementu tablicy

4:16i jest to metoda pop.

4:17Czyli możemy powiedzieć arr.pop i nic jej nie podajemy, wywołuje ją jakby w

4:22taki sposób, ona nam usunie ostatni element tablicy w tym przypadku jeżeli to byśmy

4:27wykomentowali to ostatnim elementem jest Mariusz.

4:30Zauważ, że po takiej operacji mamy Tomek,

4:32Kasia i Jacek. Ale co ciekawe ta metoda również zwraca ten element.

4:35Więc gdybyśmy

4:36stworzyli sobie stałą i napisali last czyli ostatni element tablicy

4:40i przypisali sobie tutaj arr.pop to to wywołanie usunie ten ostatni element

4:45czyli Mariusza z tej tablicy ale również go zwróci.

4:48I teraz pod stałą last będziemy mieli

4:51Mariusz. Zauważ, że czasami tak jest, że chcemy usunąć ten ostatni element i mieć

4:55do niego odwołanie bo jeszcze coś z tą wartością chcemy zrobić,

4:58a pamiętaj, że w tablicy mogą być nie tylko wartości takie tekstowe mogą być liczby

5:03ale tu również mogą być inne tablice i bardzo jeszcze wiele innych wartości.

5:08No i w końcu mamy również metodę, która nazywa się Shift i ona usunie nam element

5:12z początku tablicy więc napiszemy const np.first

5:16czyli chcemy mieć pierwszy element powiemy arr.shift

5:20i to sprawi, że ten pierwszy element czyli w tym przypadku był to Tomek zostanie

5:24usunięty zauważy, że go już tutaj nie ma ale on znajdzie się

5:28w stałej first, możemy tutaj zrobić console.log first

5:33i będziemy tutaj mieli Tomek. Więc to jest kilka sposobów na usuwanie elementów z tablicy.

5:38Powiem Ci, że najczęściej korzystam z takiego sposobu jak splice kiedy konkretny

5:43element z tej tablicy chcę usunąć i tak jak wspomniałem w jakiś dynamiczny sposób

5:47będziemy wyliczać pod jakim indeksem jest interesujący nas element,

5:50na razie tutaj nie chcę robić zbyt

5:52rozbudowanych przykładów chciałem żebyśmy się skupili tylko na tym, że elementy z

5:57tablicy można usuwać i, że w przypadku JavaScriptu jest na to kilka sposobów.

6:01Pamiętaj, że w innych językach może to wyglądać trochę inaczej ale w każdym

6:04języku będziesz mógł i dodawać i usuwać elementy z tablicy

6:08więc to jest rzecz, którą należy zapamiętać.