Podstawy Programowania: Dodawanie elementów do tablicy

0:00Kiedy wiesz już czym są tablice to pokażę

0:02Ci jak możemy dynamicznie dodawać elementy do tablicy. Bo do tej pory jak utworzyliśmy

0:06sobie tablicę, ja tutaj nazwą ją arr, to od razu wpisywaliśmy tutaj jakieś np.

0:12liczby, jakieś wartości, natomiast można je

0:15dodawać na późniejszym etapie. Kiedy już taką tablicę mamy to możemy do niej dodać

0:19jakieś elementy. I pokazywałem Ci, że możemy się odwołać po

0:23indeksie do poszczególnych elementów takiej tablicy np. gdybym

0:26napisał arr 0

0:27to powiedziałbym podstaw w to miejsce czy

0:30tak naprawdę zwróć mi to co jest na samym początku tej tablicy.

0:34Czyli gdyby tu była jedynka zwróciło by jedynkę.

0:36Jeżeli tu nic nie ma zwróci mi

0:38undefined. Ale w ten sam sposób możemy

0:40przypisywać elementy do tablicy. Czyli mogę powiedzieć, że arrays 0 to się równa np.

0:45Kasia a arr 1 to się równa powiedzmy Tomek. I to będzie dokładnie tak samo

0:53jakbym tutaj na początku wpisał Kasia i Tomek i miał właśnie takie dwa elementy.

0:58Zobaczymy jak sobie to wyświetlimy w console.log całą tą tablicę jak nam ją pokaże.

1:03Zauważ dokładnie w ten sposób by to

1:04wyglądało. Jak zapisze tutaj również nam program pokaże tę tablicę. Więc w ten

1:09sposób po konkretnym indeksie możemy dodawać elementy do tablicy.

1:13Jeżeli chcielibyśmy dodać jakiś element na

1:15koniec tablicy i nie wiemy jaki to jest indeks, to teraz

1:18napisałem, że pod 0 dodaj pod 1 a teraz powiedzmy, że nie chcę podawać

1:23ręcznie, że pod indeks 2 czyli jako kolejny element coś dodaj

1:27to mogę skorzystać z właściwości length. Bo zauważ, że jeżeli się odwołamy do arr.length

1:33czyli zapytamy jaka jest długość tablicy, ile ona ma elementów, zwróci nam

1:37dwójkę. No i to jest dokładnie to czego potrzebujemy. Czyli mamy 0 oraz 1

1:42jeżeli pod indeksem 2 byśmy dodali jakiś

1:44element to będzie to trzeci element. Czyli skąd wziąć dwójkę dynamicznie.

1:49No właśnie z arr.length więc możemy napisać arr i tutaj zamiast podawać dwójkę to

1:54napiszemy arr.length to się wykona i to nam po prostu dokładnie

1:58tak samo jak niżej zwróci dwójkę i ją tutaj wstawi,

2:01ale jest to dynamiczne bo nie musimy się zastanawiać czy to będzie dwójka czy

2:04piątka, czyli pod indeksem 2 zapiszemy sobie jeszcze np.

2:07Monika, w ten sposób.

2:09I teraz jeśli wyświetlimy całą tablicę to będzie Kasia, Tomek i Monika.

2:13Ale gdybym usunął tą linijkę albo ją wykomentował to tutaj też dodaliśmy na koniec bo arr.length

2:19zwróciło po prostu 1 i w tym miejscu to dodaliśmy zauważ mamy Kasia, Monika.

2:25Kolejnym sposobem dodawania elementów do

2:27tablicy jest skorzystanie z takiej specjalnej metody, która nazywa się push

2:31czyli jakby wepchnij element na koniec tablicy i wygląda to tak, że odwołujemy się do arr

2:37zauważ, że to cały czas kieruje po prostu

2:38na tą stałą. Jeżeli ją inaczej nazwiesz cały czas tutaj odwołujesz się po innej nazwie. To

2:43kieruje na tą utworzoną tutaj tablicę i mamy tam metodę, która się nazywa push.

2:48Metody to są tak naprawdę funkcje. O funkcjach jeszcze powiemy później

2:51ale ważne jest to, że one w tych nawiasach tutaj

2:53pozwalają przyjmować pewne parametry i coś w tej funkcji się dzieje my wcale nie musimy

2:58wiedzieć co się dzieje pod spodem i ona tą tablicy zmodyfikuje.

3:01Więc możemy powiedzieć arr.push np. Piotrek

3:05i to nam doda element do tablicy właśnie na jej końcu tak jak to zrobiliśmy tutaj.

3:09Zauważ, że jak wyświetlany całą tą tablicę to mamy już Kasia, Tomek, Monika i Piotrek. Więc

3:14za pomocą arr.push możemy dodać element na końcu tablicy. Pamiętaj, że tu możesz dodać

3:19cokolwiek. Może dodać dwójkę, możesz dodać inną tablicę, wszystko jedno,

3:23ważne, że to zapisze nam na końcu tej tablicy wartość jaką podaliśmy.

3:27No i co jeszcze jest bardzo ważne.

3:29Mam nadzieję, że na tym etapie już rozumiesz jak to się wszystko łączy.

3:32Tu wcale nie musi być podana wartość w ten sposób taki literalny, tu byś

3:37mógł podać jakąś zmienną, coś co będzie dynamiczne jeżeli mielibyśmy zmienną np.

3:41firstName = Piotrek to oczywiście tutaj można powiedzieć arr.push firstName

3:47To będzie dokładnie to samo bo pod firstName

3:49zostanie podstawiony Piotrek i dopiero wtedy jakby wrzucone do tej funkcji push.

3:54Więc po prostu o tym pamiętaj natomiast ja może wrócę

3:58do takiego zapisu żeby tutaj to było bardziej czytelne i oczywiste.

4:02Zauważ, że push dodało nam to imię na końcu tablicy.

4:06Natomiast gdybyśmy chcieli dodać coś na

4:08początku tablicy to tutaj już nie moglibyśmy tego zrobić

4:12tak łatwo jak wcześniej bo gdybym chciał dodać na początku przed Kasia na przykład

4:16imię Patryk to gdybym zrobił arr 0 czyli na początku chciałbym coś dodać i

4:21bym napisał Patryk to zauważ, że to nadpisało

4:24Kasię bo Kasia była pod indeksem zero. Więc tutaj już tak łatwo się tego zrobić nie da bo

4:29musielibyśmy wszystkie pozostałe elementy w jakiś sposób przesuwać.

4:32Natomiast podobnie jak w przypadku push mamy metodę, która pozwala nam dodawać coś

4:37na początku tablicy i ta metoda nazywa się unshift.

4:40Więc napiszemy arr.unshift

4:42w ten sposób i powiemy Patryk.

4:46I zauważ, że Patryk został dodany tutaj na początku, potem dopiero mamy Kasię i

4:50wszystkie jakby pozostałe elementy zostały przesunięte,

4:53można powiedzieć tak obrazowo w prawo. I

4:56teraz w tej tablicy mamy raz, dwa, trzy, cztery, pięć elementów.

5:00Jak zatem widzisz możemy łatwo dodawać elementy do tablicy i w języku JavaScript

5:05robi się to za pomocą takich metod a w innych językach może to wyglądać trochę

5:08inaczej niemniej jednak koncepcja jest ta sama a tutaj cały czas próbujemy nauczyć

5:12Cię tych koncepcji programistycznych żebyś umiał myśleć jak programista a później z

5:17jakiej funkcji się korzysta czy w jaki sposób się dodaje elementy do tablicy

5:20nie będzie dla Ciebie tak bardzo istotne

5:22bo to będzie zależne od języka programowania np.

5:25w języku PHP jest taka specjalna funkcja

5:27array_push gdzie się podaje tablicę, do której chcemy coś dodać, tu byśmy musieli

5:31powiedzieć, że do tablicy, która się kryje pod stałą arr chcemy dodać np.

5:36Wojtek i dokładnie to samo by się stało.

5:38Tutaj to nie zadziała bo takiej funkcji

5:40nie ma w języku JavaScript ale w języku PHP już by to działało.

5:43Więc możesz tutaj zauważyć, że w różnych

5:45językach programowania będą różne sposoby na dodawanie elementów do tablicy,

5:50natomiast sama koncepcja jest dokładnie taka sama.