JavaScript: Dodawanie elementów do tablicy

0:00Teraz pokażę Ci, w jaki sposób możemy dodawać elementy do tablicy

0:04bo nie zawsze jest tak, że tworzymy tablicę, gdzie od razu wpisujemy wszystkie

0:07elementy. Więc utworzymy sobie tablicę, którą nazwę arr,

0:11będzie to stała i będzie to pusta tablica, aczkolwiek

0:14tutaj mógłbyś od razu wstawić sobie jakieś elementy i później do tej tablicy dodawać.

0:19I teraz jest kilka sposobów jak w języku

0:20JavaScript dodawać elementy do tablicy i one się przydadzą w różnych kontekstach,

0:25czy będziemy to dodawać w jakichś pętlach itd.

0:28Natomiast pokażę Ci, że możemy to zrobić

0:31za pomocą indeksów. Bo tak jak mogliśmy się odwołać do jakiegoś elementu tablicy

0:36poprzez odwołanie się do tej tablicy i do jej indeksu np.

0:400 zwracało pierwszy element, jeden zwracało drugi itd.

0:44Swoją drogą, jeżeli chciałbyś się odwołać do elementu tablicy, który nie istnieje,

0:48bo ona jest pusta, jej właściwość length zwróciłaby 0, to dostaniesz tutaj

0:52undefined, czyli wartość, o której już mówiliśmy.

0:54Czyli po takim odwołaniu czy nawet po takim dostaniemy undefined.

0:58Ale możemy powiedzieć, że chcemy pod

0:59pierwszym indeksem tablicy przypisać sobie np.

1:02Kasia, a pod indeksem numer 1, czyli będzie to drugie pole

1:07można tak powiedzieć przypisać Tomek. I

1:09teraz będziemy mieli tablicę dokładnie taką samą, jak byśmy wpisali tutaj

1:13Kasia

1:16i Tomek. Czyli dokładnie w ten sposób to zadziała, ale dynamicznie

1:19możemy jakoś w kodzie dodawać tam elementy.

1:22Tutaj oczywiście moglibyśmy podstawić nazwę jakiejś zmiennej, która by przechowywała

1:26wartość, którą tam chcemy wstawić i tak dalej.

1:29Wyświetlmy sobie tę tablicę w konsoli, żeby zobaczyć.

1:32No i wygląda dokładnie tak, jak powiedziałem.

1:35Jeżeli chciałbyś dodać jakiś element na końcu tablicy, jest do tego pewien trik.

1:39Bo teraz, jeżeli chcielibyśmy dodać kolejny element, kiedy mamy już tam dwa

1:43elementy, to kolejny dalibyśmy pod arr 2.

1:46Tutaj trzeba wstawić dwójkę.

1:48Skąd tą dwójkę można byłoby wziąć dynamicznie?

1:51Otóż na tym etapie

1:53jak mamy dwa elementy w tablicy to arr.length zwraca nam właśnie dwójkę.

1:58Czyli można zastosować sobie taki trik, że powiemy arr i tutaj zamiast ręcznie

2:03wstawiać dwójkę to odwołamy się do naszej tablicy i do length,

2:07to wyrażenie sprawi, że tu zostanie właśnie podstawiona dwójka.

2:10Czyli dokładnie tak to będzie wyglądać.

2:12I przypiszemy tutaj np.

2:14Piotr albo Piotrek po prostu w ten sposób. I teraz będziemy mieć trzy elementy.

2:20Niemniej jednak taki sposób dodawania elementów do tablicy jest rzadki i raczej

2:24wykorzystywany gdzieś może w pętlach, jak chcielibyśmy skopiować dwie tablice itd.

2:29Natomiast mamy również coś takiego jak

2:30metody dostępne na różnych obiektach w języku JavaScript

2:34i tablica również jest traktowana jak taki obiekt.

2:36Dlatego możemy się odwołać do tej tablicy

2:38poprzez stałą arr i po kropce odwołać się do jej metody, która nazywa się push.

2:44Metody są to funkcje,

2:46o funkcjach jeszcze potem sobie powiemy, ale funkcje przyjmują jakieś parametry,

2:50które są gdzieś wewnątrz jakoś przetwarzane.

2:52My nie wiemy jak działa pod spodem metoda push.

2:54Jest to po prostu metoda wbudowana w język JavaScript.

2:57Wiemy tylko, że możemy przekazać jej

2:59element, który chcemy dodać na końcu tablicy.

3:02Więc jeżeli tutaj dodamy sobie string Monika to na końcu tej tablicy, to możemy

3:08wyświetlić właśnie później, bo program jest wykonywany z góry na dół,

3:11na końcu tej tablicy zostanie dodany taki element

3:14Monika, dokładnie tak samo jak zrobiliśmy to tutaj.

3:16Zobacz teraz mamy 4 elementy w tej tablicy.

3:19Jeżeli chcielibyśmy dodać jakiś

3:23element na początku tablicy to wydawałoby się, że można to zrobić za pomocą arr0,

3:28ale gdybyśmy tak zrobili teraz to byśmy nadpisali Kasię innym elementem.

3:32A jeżeli chcemy dodać coś na początku tablicy, a wszystkie elementy

3:36przesunąć o jeden indeks w prawo, to korzystamy z metody unshift.

3:40Odwołamy się do arr, następnie unshift i dodamy sobie tutaj np.

3:45Patryk. Zobacz jak teraz zmieni się ta tablica.

3:47Na początku jest Patryk, a wszystkie inne

3:49elementy zostały przesunięte po prostu w prawo o jeden indeks.

3:54Na końcu wspomnę jeszcze tylko o tym, że

3:56mimo tego, że stworzyliśmy tutaj tę tablicę jako stałą, czyli const, to

4:00zauważ, że możemy modyfikować jej zawartość.

4:02I to jest bardzo ważne w języku JavaScript, bo mówiłem Ci wcześniej, że

4:05jak mamy stałą to nie da się zmienić jej wartości.

4:07Natomiast jeżeli ona przechowuje jakiś dynamiczny obiekt, a takim obiektem jest

4:11tablica to jak najbardziej można zmieniać wartość tego obiektu.

4:15Natomiast nie można do tej stałej przypisać czegoś innego.

4:18Czyli nie mógłbym powiedzieć, że arr ma się równać pustej tablicy, albo że chcę

4:22tutaj przypisać null albo zmienić tą wartość na jakąkolwiek inną.

4:26Tego zrobić nie można, ale można bez problemu zmieniać to co jest przypisane do

4:31tej stałej, czyli w tym przypadku tablicę.