Node.js dla początkujących - Część 6: Tablice

Witaj w kolejnej lekcji kursu JavaScript dla początkujących! Dziś zajmiemy się tematem, który jest absolutnie fundamentalny w programowaniu – tablicami. Wyobraź sobie, że masz pudełko, w którym możesz przechowywać wiele różnych rzeczy, poukładanych w określonej kolejności. Właśnie tym są tablice w JavaScript! Pozwalają nam przechowywać kolekcje danych w jednym miejscu, co znacząco ułatwia zarządzanie nimi. Zaczynamy!

Czym są tablice i jak je tworzyć?

Tablica w JavaScript to obiekt, który przechowuje uporządkowaną listę wartości. Mogą to być liczby, teksty (stringi), wartości logiczne (true/false), a nawet inne tablice!

Istnieją dwa podstawowe sposoby tworzenia tablic:

1. Literał tablicowy (najczęściej używany):

let owoce = ["jabłko", "banan", "pomarańcza"];
let liczby = [1, 2, 3, 4, 5];
let mieszane = [1, "tekst", true, [6, 7]]; // Tablica może zawierać inne tablice!
let pustaTablica = []; // Pusta tablica

2. Konstruktor new Array() (rzadziej spotykany):

let kolory = new Array("czerwony", "zielony", "niebieski");

Indeksy: Klucz do elementów tablicy

Każdy element w tablicy ma swój unikalny numer, zwany indeksem. Indeksy zaczynają się od 0. Oznacza to, że pierwszy element w tablicy ma indeks 0, drugi ma indeks 1, trzeci ma indeks 2 i tak dalej.

Aby dostać się do konkretnego elementu tablicy, używamy notacji z nawiasami kwadratowymi:

let owoce = ["jabłko", "banan", "pomarańcza"];
console.log(owoce[0]); // Wyświetli: "jabłko"
console.log(owoce[1]); // Wyświetli: "banan"
console.log(owoce[2]); // Wyświetli: "pomarańcza"

Popularne metody dostępne dla tablic

JavaScript oferuje wiele przydatnych metod do pracy z tablicami. Oto kilka z nich:

• push(): Dodaje element na końcu tablicy.

let zwierzeta = ["pies", "kot"];
zwierzeta.push("chomik");
console.log(zwierzeta); // Wyświetli: ["pies", "kot", "chomik"]

• pop(): Usuwa ostatni element z tablicy i go zwraca.

let liczby = [1, 2, 3];
let usunietaLiczba = liczby.pop();
console.log(liczby); // Wyświetli: [1, 2]
console.log(usunietaLiczba); // Wyświetli: 3

• shift(): Usuwa pierwszy element z tablicy i go zwraca.

let kolory = ["czerwony", "zielony", "niebieski"];
let usunietyKolor = kolory.shift();
console.log(kolory); // Wyświetli: ["zielony", "niebieski"]
console.log(usunietyKolor); // Wyświetli: "czerwony"

• unshift(): Dodaje element na początku tablicy.

let miasta = ["Warszawa", "Kraków"];
miasta.unshift("Gdańsk");
console.log(miasta); // Wyświetli: ["Gdańsk", "Warszawa", "Kraków"]

• splice(): Pozwala na dodawanie i usuwanie elementów w dowolnym miejscu tablicy. Przyjmuje 3 argumenty (start, deleteCount, itemsToadd)

let dniTygodnia = ["pon", "wto", "czw"];
dniTygodnia.splice(2, 0, "śro"); // Dodajemy "śro" na indeksie 2
console.log(dniTygodnia); // Wyświetli: ["pon", "wto", "śro", "czw"]

dniTygodnia.splice(1, 2); // Usuwamy 2 elementy od indeksu 1
console.log(dniTygodnia); // Wyświetli: ["pon","czw"]

• map(): Tworzy nową tablicę, przekształcając każdy element istniejącej tablicy za pomocą podanej funkcji.

let liczby = [1, 2, 3];
let podwojoneLiczby = liczby.map(function(liczba) {
  return liczba * 2;
});
console.log(podwojoneLiczby); // Wyświetli: [2, 4, 6]

• filter(): Tworzy nową tablicę, zawierającą tylko te elementy, które spełniają określony warunek.

let liczby = [1, 2, 3, 4, 5, 6];
let parzysteLiczby = liczby.filter(function(liczba) {
  return liczba % 2 === 0;
});
console.log(parzysteLiczby); // Wyświetli: [2, 4, 6]

• reduce(): Redukuje tablicę do pojedynczej wartości, wykonując podaną funkcję na każdym elemencie.

let liczby = [1, 2, 3, 4];
let suma = liczby.reduce(function(akumulator, liczba) {
  return akumulator + liczba;
}, 0); // 0 to wartość początkowa akumulatora
console.log(suma); // Wyświetli: 10

Praca domowa

1. Stwórz tablicę z imionami swoich ulubionych bohaterów filmowych.
2. Użyj metody push() aby dodać do niej jeszcze jednego bohatera.
3. Użyj metody pop() aby usunąć ostatniego bohatera.
4. Stwórz nową tablicę, która będzie zawierała długości imion bohaterów z pierwszej tablicy (użyj metody map()).
5. Napisz krótki program, który za pomocą pętli for wyświetli wszystkie elementy tablicy z imionami bohaterów.

Podsumowanie

Tablice są niezwykle potężnym narzędziem w JavaScript. Pozwalają nam efektywnie zarządzać kolekcjami danych i wykonywać na nich różnorodne operacje. Zachęcam Cię do samodzielnego eksperymentowania z poznanymi metodami i do lektury pozostałych postów na naszym blogu, gdzie znajdziesz jeszcze więcej przydatnych informacji. Pamiętaj, praktyka czyni mistrza! A jeśli masz jakiekolwiek pytania, śmiało zadawaj je w komentarzach. Powodzenia!