Lesson 3

Lekcja 3 – Tablice i Obiekty: Twoje Skarbce Danych 💎📦

Witaj ponownie, mistrzu danych! Dzisiaj zanurzymy się w świat tablic i obiektów—dwóch potężnych narzędzi JavaScript, które pomogą ci zarządzać danymi bez zmartwień. Wyobraź sobie tablice i obiekty jako swoje skarbce, gdzie możesz przechowywać, organizować i znajdować wszystko, czego ci trzeba. Niezależnie, czy to lista rzeczy do zrobienia, czy szczegóły dotyczące twojego kota, z tablicami i obiektami masz pełną kontrolę!

Tablice – Organizacja jak u Profesjonalisty 📋

Tablica to lista elementów zgrabnie zapakowanych w jednym miejscu. Wyobraź sobie tablicę jako rząd szafek, z których każda skrywa coś innego (lub to samo, jeśli lubisz rutynę). Oto jak można stworzyć tablicę:

Tworzenie Tablicy

Aby zadeklarować tablicę, wystarczy para nawiasów kwadratowych. W środku wymieniasz elementy oddzielone przecinkami.

let listaZakupow = ["mleko", "jajka", "chleb", "czekolada"];
console.log(listaZakupow);

Co tu się dzieje:

listaZakupow to nazwa twojej tablicy.
Nawiasy kwadratowe [] oznaczają: „Uwaga, mamy zbiór rzeczy!”
Każdy element jest oddzielony przecinkiem, jak składniki w przepisie.

Dostęp do Elementów Tablicy

Potrzebujesz czegoś z tablicy? Tablice używają indeksów od zera, więc liczysz od 0 (dziwne na początku, ale się przyzwyczaisz!).

console.log(listaZakupow[0]); // Wynik: mleko
console.log(listaZakupow[3]); // Wynik: czekolada

W tym przykładzie listaZakupow[0] daje pierwszy element, a listaZakupow[3] przenosi cię do deseru. Proste, prawda?

Dodawanie i Usuwanie Elementów

Tablice w JavaScript są elastyczne—jak twoja dieta podczas świąt! Oto kilka metod na dodawanie i usuwanie elementów:

push(element): Dodaje element na końcu.
pop(): Usuwa ostatni element.
unshift(element): Dodaje element na początku.
shift(): Usuwa pierwszy element.

listaZakupow.push("banany"); // Dodaje "banany" na końcu
listaZakupow.pop(); // Usuwa ostatni element ("czekolada")
console.log(listaZakupow);

Obiekty – Dodaj Trochę Szczegółów 🗂️

Jeśli tablice to twoje listy, to obiekty są jak idealnie uporządkowane kartoteki. Każdy element ma nazwę (lub klucz) i wartość. Wyobraź sobie obiekt jako kolekcję par „klucz-wartość”, świetnie nadającą się do przechowywania szczegółów.

Tworzenie Obiektu

Obiekt jest zdefiniowany nawiasami klamrowymi {}, a każda właściwość ma parę klucz-wartość. Oto prosty przykład:

let zwierzak = {
  imie: "Buddy",
  gatunek: "pies",
  wiek: 5,
  przyjazny: true
};
console.log(zwierzak);

W tym obiekcie:

imie, gatunek, wiek i przyjazny to klucze.
"Buddy", "pies", 5 i true to odpowiadające im wartości.

Dostęp do Właściwości Obiektu

Aby uzyskać dostęp do właściwości obiektu, można użyć notacji z kropką lub nawiasów kwadratowych:

console.log(zwierzak.imie); // Wynik: Buddy
console.log(zwierzak["wiek"]); // Wynik: 5

Notacja z kropką jest wygodna, gdy znasz nazwę właściwości, a nawiasy kwadratowe przydają się przy dynamicznym dostępie.

Dodawanie, Zmiana i Usuwanie Właściwości

Obiekty są także elastyczne: możesz dodawać, zmieniać i usuwać właściwości, jak tylko chcesz.

zwierzak.wiek = 6; // Aktualizuje wiek
zwierzak.kolor = "brązowy"; // Dodaje nową właściwość
delete zwierzak.przyjazny; // Usuwa "przyjazny"
console.log(zwierzak);

Łączenie Tablic i Obiektów – Dynamiczny Duet 🦸‍♂️🦸‍♀️

Chcesz czegoś mocniejszego? Tablice obiektów i obiekty zawierające tablice są jak ser i chleb dla twojego kodu.

Tablica Obiektów

Idealna do list rzeczy z detalami, np. koszyk zakupowy lub lista graczy.

let druzyna = [
  { imie: "Alicja", rola: "menedżer" },
  { imie: "Bob", rola: "programista" },
  { imie: "Charlie", rola: "projektant" }
];
console.log(druzyna[1].imie); // Wynik: Bob

Obiekt z Tablicami

Świetnie, gdy każda właściwość ma kilka wartości.

let klasa = {
  uczniowie: ["Alicja", "Bob", "Charlie"],
  przedmioty: ["Matematyka", "Nauka", "Sztuka"],
  numerSali: 101
};
console.log(klasa.przedmioty[2]); // Wynik: Sztuka

Czas na Ćwiczenia!

Sprawdźmy nowe umiejętności w praktyce:

Zadanie: Zarządzaj Listą Zadań

Stwórz tablicę o nazwie listaZadan z trzema zadaniami.
Dodaj czwarte zadanie na końcu.
Usuń pierwsze zadanie z listy.
Stwórz obiekt o nazwie szczegolyZadania z właściwościami zadanie, termin i priorytet.

let listaZadan = ["Kupić zakupy", "Posprzątać pokój", "Czytać książkę"];
listaZadan.push("Ćwiczenia");
listaZadan.shift();
let szczegolyZadania = {
  zadanie: "Ćwiczenia",
  termin: "Jutro",
  priorytet: "Wysoki"
};
console.log(listaZadan);
console.log(szczegolyZadania);

Co Dalej?

Świetna robota! Właśnie opanowałeś(-aś) potęgę tablic i obiektów. Te struktury pozwolą trzymać dane w porządku, a kod – sprawnie działać. W następnym odcinku zanurzymy się w manipulację DOM—czyli jak sprawić, by JavaScript bezpośrednio współdziałał z twoimi stronami internetowymi!

Czekaj na Lekcja 4 – Manipulacja DOM: Przekształć Sieć w Swój Własny Plac Zabaw!

A teraz, ruszaj i wypełnij te skarbce danymi!

JavaScript Tablice Obiekty Struktury Danych