Tablice w JavaScript

W dzisiejszym artykule przybliżę Ci temat tablic w języku JavaScript. Tablica (z angielskiego array) jest to zbiór różnych elementów. Tablica jest obiektem, a więc posiada również różne właściwości i funkcje.

Od razu przejdę do przykładu. Powiedzmy, że potrzebujesz zadeklarować kilka kursów programistycznych. Mniej więcej tak by to wyglądało bez używania tablic:

let course1 = 'JavaScript';
let course2 = 'C#';
let course3 = 'jQuery';
let course4 = 'TypeScript';
let course5 = 'SQL';

Dzięki tablicom, taka deklaracja może wyglądać w taki sposób:

let courses  = [
    'JavaScript',
    'C#',
    'jQuery',
    'TypeScript',
    'SQL'
];

Jak widać dzięki tablicy, zapis staje się dużo bardziej czytelny oraz jak przekonasz się za chwilę bardziej praktyczny.

Sprawdźmy od razu typ tablicy:

typeof courses; //"object"

Tak jak wcześniej pisałem, rzeczywiście tablica jest również obiektem. Możesz po kropce odwoływać się do poszczególnych właściwości i funkcji.

Inny, nie zalecany sposób deklarowania tablicy:

let myCourses = new Array('.NET', 'C#', 'JavaScript');

Jeżeli spróbujesz odczytać w konsoli wartości elementów tablicy wpisując:

console.log(courses);

Orzymasz:

Array(5) [ "JavaScript", "C#", "jQuery", "TypeScript", "SQL"]

Po rozwinięciu zauważysz, że każdy element ma swój indeks. Do poszczególnych elementów tablicy odwołujemy się właśnie za pomocą tych indeksów. Pamiętaj, że indeksowanie tablic zaczynamy od zera. Czyli element pierwszy ma indeks zero, element drugi ma indeks jeden, element trzeci ma indeks dwa i tak dalej.

console.log(courses[0]); //"JavaScript"
console.log(courses[1]); //"C#"
console.log(courses[4]); //"SQL"

Jeżeli wpiszesz nazwę samej tablicy bez indeksu, zostaną zwrócone wszystkie elementy.

To, że tablica courses ma pięć elementów, wcale nie oznacza że zawsze tyle będzie miała. Wyżej pokazałem Ci jak odczytać wartości poszczególnych elementów. Oczywiście elementy tablicy możesz również modyfikować, dodawać, a także usuwać.

Modyfikacja istniejącego elementu tablicy:

courses[1] = '.NET';
console.log(courses[1]); //".NET"

Dodawanie nowego elementu do tablicy:

courses[5] = 'Visual Studio';
console.log(courses[5]); //"Visual Studio"
courses[courses.length] = 'Resharper';
console.log(courses[6]); //"Resharper"
courses.push('TDD');
console.log(courses[7]); //"TDD"

Jak widzisz dodawać do tablicy można na różne sposoby, ja jednak zalecam Ci dodawanie nowych elementów poprzez używanie metody push. Metoda push dodaje nowy element oraz zwraca długość nowej tablicy. Jest ona dosyć wygodna i na pewno bezpieczniejsza (nie nadpiszesz przez przypadek innego elementu, oraz nie musisz martwić się, że przez nie wagę zostawisz w tablicy puste elementy).

let length = courses.push('Dependency Injection');
console.log(length); //7

Aby usunąć element z tablicy należy użyć metody pop. Metoda ta zwraca oraz usuwa ostatni element z tablicy.

let course = courses.pop();
console.log(course); //"Dependency Injection"

Czy można dodawać i usuwać również elementy, które są na początku tablicy? Oczywiście, że tak. Służą do tego dwie metody unshift oraz shift.

Metoda unshift wstawia nowy element/elementy na początku tablicy, oraz zwraca długość tablicy.

courses.unshift('.NET Core');

Metoda shift zwraca i usuwa pierwszy element w tablicy.

courses.shift();

Tablica może zawierać elementy różnych typów.

courses.push(12); //number
courses.push(true); //boolean
courses.push('Unit test'); //string

Tablice zawierają dużo więcej ciekawych właściwości i metod, ale w dzisiejszym artykule przedstawiłem Ci tylko kilka najważniejszych z nich. W kolejnych artykułach na pewno będziemy jeszcze wracać do tablic, także poznasz jeszcze dużo przydatnych technik dotyczących tablic m.in. używanie pętli do odczytywania elementów tablicy.

To wszystko co chciałem Ci przekazać w tym artykule. Zapraszam do kolejnego artykułu z serii podstawy programowania w języku JavaScript.

Kolejny artykuł - Funkcje w JavaScript.

Blog Dla Młodszych Programistów C#/.NET

Dodaj komentarz

Wyszukiwarka

Tagi

Najnowsze artykuły

Losowe artykuły