JavaScript: Usuwanie elementów tablicy

0:00Skoro wiesz już jak dodawać elementy do

0:02tablicy, to teraz będziemy z tej tablicy chcieli jakieś elementy usunąć. Więc

0:06zróbmy sobie tablicę gdzie będzie kilka wartości tekstowych,

0:10ale to usuwanie oczywiście działa tak samo

0:12bez względu na to, co jest przechowywane w tablicy

0:15i może dodajmy sobie tutaj jeszcze Mariusz, ok.

0:19I mamy teraz taką tablicę znowu pod stałą arr jak array

0:24i jej długość to będzie 4.

0:26I teraz jest kilka sposobów na to, jak usuwać elementy z tablicy.

0:29Jeżeli chcielibyśmy wyczyścić całą

0:31tablicę, czyli usunąć z niej wszystkie elementy, to możemy to zrobić.

0:35Oczywiście nie możemy nadpisać tej stałej nową, pustą tablicą.

0:38Tak by było wydaje się najprościej, ale możemy się

0:41odwołać do właściwości length, która nam odczytuje ile jest elementów w tablicy.

0:45Widziałeś, że ona zwraca,

0:47w tym przypadku zwróciłaby 4, ale możemy również do niej przypisywać wartość.

0:51I jeżeli tu byśmy powiedzieli 0, to to

0:53sprawiłoby, że ta tablica, jeśli ją wyświetlimy, będzie po prostu pusta.

0:58Natomiast to jest może dobry przykład

1:01tylko wtedy, kiedy chcemy wyzerować z jakiegoś powodu tablicę, ale w żadnym

1:04innym wypadku raczej nie ustawia tutaj innych wartości.

1:06Bo jeżeli ustawisz 10, zauważ co się stanie.

1:10Będziemy mieli tablicę, która ma kilka

1:11elementów i tutaj Chrome DevTools pokazuje nam, że mamy 6 jeszcze pustych elementów.

1:16Chodzi o to, że gdybyśmy się teraz do nich

1:18chcieli odwołać, one będą miały wartość undefined.

1:20Więc tutaj można sobie też namieszać przez to,

1:23więc jeżeli kiedykolwiek będziesz używał

1:25przypisania do arr.length, to tylko w sytuacji kiedy chcesz taką tablicę wyczyścić.

1:30Możemy za to korzystać z metod. Tak jak

1:33mieliśmy metody do dodawania elementów do tablicy na początku i na końcu,

1:36mamy też metody do usuwania tych elementów na różny sposób, więc może to wykomentuje.

1:42I teraz co będę chciał zrobić?

1:43Będę chciał usunąć ostatni element tablicy i można to zrobić za pomocą arr.pop.

1:48To modyfikuje tablica, na której to wykonaliśmy i zwraca ten element.

1:52Co to oznacza?

1:54Że usuniemy Mariusza,

1:55zobacz już tego elementu tutaj nie ma, ale

1:57gdybyśmy chcieli coś z tym elementem zrobić i przechwycić sobie go gdzieś, to moglibyśmy

2:02przypisać to do jakiejś stałej lub zmiennej np.

2:05tutaj last

2:06czyli chcę mieć pod stałą last

2:09ostatni element jaki był w tej tablicy, a

2:11więc arr.pop usunie go z tablicy i go zwróci.

2:14Czyli podstawi mi tutaj po prostu Mariusz.

2:16Jeżeli teraz zrobię console.log last to będę miał tam po prostu ciąg

2:21Mariusz. Dokładnie on został wyciągnięty z tej tablicy i przypisany do tej stałej.

2:25Natomiast jeżeli tylko chciałbym usunąć,

2:26ale nie potrzebuję tego elementu to zrobiłbym to w taki sposób.

2:30Wtedy całe to wyrażenie usunie ten element i oczywiście jakby go tutaj zwróci,

2:34Mariusz, coś takiego by się stało i to po prostu

2:38będzie zignorowane, bo nic z tą wartością nie zrobiliśmy.

2:42Ok, może sobie to po prostu zostawmy tak i zapiszemy do stałej. Odwrotnością

2:46czyli gdybyśmy chcieli usunąć pierwszy

2:48element tablicy i wszystkie przesunąć wtedy jakby w lewo

2:52i też możemy go przechwycić

2:53jest metoda, która nazywa się Shift. Więc moglibyśmy tutaj powiedzieć first,

2:58czyli pierwszy element to arr.shift,

3:01jeśli wywołamy tę metodę parą takich

3:03nawiasów okrągłych, to usuniemy Tomka i zwrócimy go tutaj do tej stałej first.

3:09Nie jest nam on do niczego potrzebny, ale zauważ, że w ten sposób rzeczywiście

3:12usunęliśmy i pierwszy i ostatni element tablicy.

3:15Często jednak będziemy chcieli usuwać jeden konkretny element tablicy i to się

3:20przyda już później, w jakiś bardziej rozbudowanych przykładach.

3:23Powiedzmy będziemy do tablicy wkładać jakieś różne elementy, np.

3:27będziemy mieli powiedzmy listę jakiś wpisów,

3:30wyobraź sobie, że masz wpisy na jakiegoś bloga w takim formacie JSON,

3:34jeżeli nie wiesz jak ten format działa, to jeszcze o nim będziemy mówić później.

3:38Ale mamy jakieś wpisy i te wpisy znajdują się w tablicy.

3:41Może być tak, że mamy wyświetlaną tabelkę

3:43z tymi wpisami albo z czymkolwiek innym i po kliknięciu na stronie na jakiś

3:47przycisk będziemy chcieli dany element usunąć.

3:50Wtedy będziemy musieli sobie odczytać, który to jest element np.

3:53piąty element tablicy i będziemy z tej tablicy chcieli go po prostu usunąć.

3:57Czyli taka sytuacja, w której chcemy konkretnie usunąć np.

4:00Jacka, również może się znaleźć i to

4:03będziemy robić za pomocą metody, która nazywa się splice.

4:07Więc jeżeli Jacek jest pod indeksem drugim, bo indeksujemy od zera 0, 1, 2,

4:13to metodą splice możemy zrobić coś takiego arr.splice

4:18i mówimy, od którego indeksu chcemy zacząć usuwanie.

4:21Jacek jest pod indeksem drugim, więc

4:23podajemy dwójkę i ile elementów chcemy usunąć.

4:26Jeżeli chciałbym usunąć Jacka i Mariusza wpisał bym 2.

4:29Jeżeli chcę usunąć tylko Jacka wpisze 1.

4:33OK, zobaczmy.

4:36Odświeżamy.

4:37I jak widzisz to nie zadziałało, ale to

4:38właśnie dlatego, że wcześniej przecież zmodyfikowaliśmy tę tablicę, więc Jacek

4:42już nie jest na miejscu drugim, tak jak wspomniałem, więc wykomentuję te dwie

4:46linijki, żeby nam tej tablicy nie zmieniało

4:49i teraz powinniśmy zobaczyć, ok, jeszcze zobaczymy błąd, bo tutaj się zobacz

4:53odwołaliśmy się do stałej, której nie ma,

4:55ja ją wykomentowałem, ok, jeszcze raz i teraz zobaczymy, że Jacek rzeczywiście zniknął.

5:00Czyli metoda splice pozwala nam usunąć konkretny element podając jego indeks.

5:05Gdybyśmy nie wiedzieli pod jakim indeksem

5:07jest Jacek, to możemy z kolei skorzystać z metody indexOf.

5:11Może to na moment wykomentuje i pokażę Ci jak ona działa.

5:14Może w przeglądarce. Odwołamy się do tego

5:16arr i jak jej podamy indexOf, to jest taka metoda

5:22i zapytamy pod jakim indeksem jest Jacek to zwróci nam dwójkę czyli 0, 1, 2.

5:28To nam zwraca number, typ number.

5:31Więc jeżeli takie wywołanie zwróci nam dwójkę to możemy tą dwójkę sobie podstawić do

5:34metody splice. Czyli zamiast tutaj wpisywać dwójkę

5:37bo ja widzę wizualnie gdzie ten Jacek jest

5:39to oczywiście jak będziemy tworzyć programy to będzie to wszystko musiało być

5:42dynamiczne, a więc można się odwołać do arr.indexOf i tutaj podamy po prostu

5:48Jacek Czyli najpierw zostanie to wyrażenie tutaj

5:52wyliczone, to nam podstawi dwójkę, no i zadzieje się dokładnie to samo, co stało

5:57się przed momentem, a więc Jacek zostanie usunięty z tablicy.

6:01Co ważne, ta metoda splice również zwraca

6:03usuwane elementy, więc jeżeli chciałbym tutaj przechwycić i nazwać sobie stałą np.

6:08removed, czyli to co usunęliśmy i wyświetlić w konsoli, zobacz,

6:14to dostaniemy tablicę.

6:16Czyli to jest tak, że usuwamy ten element

6:18z tablicy i ta metoda zwraca nam nową tablicę z tym jednym elementem.

6:22Bo gdybym usunął tutaj dwa elementy, a nie tylko Jacka, czyli Jacka i Mariusza,

6:27to dostałbym tablicę, gdzie będzie i Jacek i Mariusz.

6:29Więc czasami jest tak, że chcemy usunąć

6:31element z tablicy i sobie również go przechwycić,

6:34można to zrobić, a czasami jest tak, że po

6:36prostu chcemy go usunąć i nie jest nam ta wartość do niczego potrzebna,

6:39wtedy nie będziemy tego przechwytywać do żadnej zmiennej czy stałej.