Tworzenie tablic w JavaScript

Tablica (array) w języku JavaScript to specjalny typ obiektu, który pozwala na przechowywanie wielu wartości w jednej zmiennej.
Każdy element tablicy ma swój indeks (numer porządkowy), zaczynający się od 0.
Dzięki tablicom można łatwo przechowywać, przetwarzać i analizować zestawy danych, takie jak liczby, teksty czy nawet inne tablice i obiekty.

Tworzenie tablic

• Za pomocą nawiasów kwadratowych [] (najczęstszy sposób)

let liczby = [10, 20, 30, 40];
let imiona = ["Anna", "Bartek", "Kuba"];

• Za pomocą konstruktora new Array()

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

• Tworzenie pustej tablicy i dodawanie elementów później

let owoce = [];
owoce[0] = "jabłko";
owoce[1] = "banan";
owoce[2] = "gruszka";

Dostęp do elementów tablicy

• Elementy tablicy odczytujemy za pomocą indeksu:

let liczby = [5, 10, 15];
console.log(liczby[0]); // Wyświetli: 5
console.log(liczby[2]); // Wyświetli: 15

Modyfikacja elementów tablicy

• Możemy zmieniać wartości w dowolnym miejscu tablicy:

let liczby = [1, 2, 3];
liczby[1] = 10; 
console.log(liczby); // Wynik: [1, 10, 3]

Sprawdzanie długości tablicy

• Każda tablica ma właściwość .length, która zwraca liczbę elementów:

let owoce = ["jabłko", "banan", "gruszka"];
console.log(owoce.length); // Wynik: 3

Przykłady zastosowania tablic

• Przykład 1: Przechowywanie listy imion i wyświetlenie pierwszego

let imiona = ["Jan", "Ewa", "Kasia", "Marek"];
console.log("Pierwsze imię na liście to: " + imiona[0]);

• Przykład 2: Obliczanie średniej z liczb

let oceny = [4, 5, 3, 5];
let suma = oceny[0] + oceny[1] + oceny[2] + oceny[3];
let srednia = suma / oceny.length;

console.log("Średnia ocen: " + srednia);

• Przykład 3: Wyświetlenie wszystkich elementów tablicy pętlą

let owoce = ["jabłko", "banan", "gruszka", "śliwka"];

for (let i = 0; i < owoce.length; i++) {
  console.log("Owoc nr " + (i + 1) + ": " + owoce[i]);
}

• Przykład 4: Tablica z różnymi typami danych

let dane = ["Jan", 25, true, ["HTML", "CSS", "JavaScript"]];
console.log(dane[0]); // "Jan"
console.log(dane[3][2]); // "JavaScript"

Podstawowe metody tablic w JavaScript

Tablice w języku JavaScript mają wiele wbudowanych metod, które ułatwiają dodawanie, usuwanie, przetwarzanie i filtrowanie danych.
Poniżej znajdziesz omówienie najczęściej używanych metod z prostymi przykładami zastosowań.

push() - dodaje element na koniec tablicy

• Metoda push() służy do dodawania nowych elementów na końcu tablicy.
  Zwraca nową długość tablicy po dodaniu elementu.

let owoce = ["jabłko", "banan"];
owoce.push("gruszka");
console.log(owoce); // Wynik: ["jabłko", "banan", "gruszka"]

Zastosowanie: gdy chcemy dynamicznie dodawać dane (np. produkty do koszyka).

pop() – usuwa ostatni element z tablicy

• Metoda pop() usuwa ostatni element tablicy i zwraca jego wartość.

let liczby = [10, 20, 30];
let ostatnia = liczby.pop();
console.log(liczby); // Wynik: [10, 20]
console.log(ostatnia); // Wynik: 30

Zastosowanie: gdy chcemy usuwać elementy w odwrotnej kolejności (np. jak ze stosu).

forEach() – wykonuje funkcję dla każdego elementu

• Metoda forEach() pozwala na wykonanie tej samej operacji dla każdego elementu tablicy.

let liczby = [1, 2, 3, 4];
liczby.forEach(function(element) {
  console.log("Liczba:", element);
});

Zastosowanie: np. do wyświetlania danych, sumowania lub modyfikowania elementów.

• Można też użyć funkcji strzałkowej:

liczby.forEach(num => console.log(num * 2)); // Wynik: 2, 4, 6, 8

map() – tworzy nową tablicę na podstawie istniejącej

• Metoda map() zwraca nową tablicę, w której każdy element jest wynikiem działania funkcji na elemencie oryginalnym.

let liczby = [1, 2, 3];
let podwojone = liczby.map(num => num * 2);
console.log(podwojone); // Wynik: [2, 4, 6]

Zastosowanie: gdy chcemy przekształcić dane, np. zwiększyć ceny produktów lub przeliczyć jednostki.

filter() – filtruje elementy tablicy

• Metoda filter() tworzy nową tablicę z elementami spełniającymi określony warunek.

let liczby = [5, 10, 15, 20];
let wiekszeOd10 = liczby.filter(num => num > 10);
console.log(wiekszeOd10); // Wynik: [15, 20]

Zastosowanie: gdy chcemy odfiltrować dane, np. znaleźć tylko liczby dodatnie lub osoby pełnoletnie.

Podsumowanie

Tworzenie obiektów w JavaScript

Obiekty w języku JavaScript to struktury danych, które pozwalają na przechowywanie informacji w postaci par klucz–wartość. Są one bardzo ważnym elementem języka, ponieważ pozwalają grupować dane, które dotyczą jednego elementu - np. użytkownika, produktu, samochodu czy książki.

Można powiedzieć, że obiekt to taki mini zestaw danych opisujący jakiś element świata rzeczywistego.

Tworzenie obiektu - podstawowe sposoby

• Za pomocą nawiasów klamrowych {}

To najprostszy i najczęściej używany sposób tworzenia obiektów.

let samochod = {
  marka: "Toyota",
  model: "Corolla",
  rok: 2020,
  kolor: "srebrny"
};

Tutaj:
- marka, model, rok, kolor – to klucze (nazwy właściwości),
- ich wartości to dane opisujące obiekt.

• Za pomocą konstruktora new Object()

Rzadziej używany, ale działa podobnie:

let osoba = new Object();
osoba.imie = "Jan";
osoba.wiek = 25;
osoba.zawod = "Programista";

• Zagnieżdżone obiekty (obiekt w obiekcie)

Obiekty mogą zawierać inne obiekty - np. dane adresowe:

let student = {
  imie: "Anna",
  kierunek: "Informatyka",
  adres: {
    miasto: "Warszawa",
    ulica: "Kwiatowa 12"
  }
};

console.log(student.adres.miasto); // Wynik: Warszawa

Dostęp do danych w obiekcie

• Można to zrobić na dwa sposoby:

let osoba = { imie: "Kasia", wiek: 30 };

console.log(osoba.imie);    // Wynik: Kasia (kropka)
console.log(osoba["wiek"]); // Wynik: 30 (nawiasy kwadratowe)

Dodawanie i usuwanie właściwości

• Można łatwo dodawać nowe pola lub usuwać istniejące:

let telefon = { marka: "Samsung", model: "S21" };

// Dodanie nowej właściwości
telefon.kolor = "czarny";

// Usunięcie właściwości
delete telefon.model;

console.log(telefon); // Wynik: { marka: "Samsung", kolor: "czarny" }

Dodawanie metod (funkcji) do obiektów

• W obiektach można przechowywać również funkcje - wtedy nazywamy je metodami.

let kalkulator = {
  dodaj: function(a, b) {
    return a + b;
  },
  odejmij(a, b) {
    return a - b;
  }
};

console.log(kalkulator.dodaj(5, 3));   // Wynik: 8
console.log(kalkulator.odejmij(10, 4)); // Wynik: 6

Zastosowanie: tworzenie obiektów z własnymi operacjami (np. kalkulator, gracz w grze, produkt w sklepie).

Iterowanie po obiekcie - pętla for...in

Pętla for...in pozwala przejść przez wszystkie właściwości obiektu:

let samochod = {
  marka: "Audi",
  model: "A4",
  rok: 2019
};

for (let klucz in samochod) {
  console.log(klucz + ": " + samochod[klucz]);
}

Wynik:

marka: Audi
model: A4
rok: 2019

Przykłady zastosowań obiektów

• Przykład 1: Dane użytkownika

let uzytkownik = {
  login: "admin123",
  email: "admin@domena.pl",
  aktywny: true
};

console.log("Login użytkownika:", uzytkownik.login);

• Przykład 2: Produkt w sklepie internetowym

let produkt = {
  nazwa: "Laptop",
  cena: 3500,
  dostepny: true,
  opis() {
    return this.nazwa + " kosztuje " + this.cena + " zł.";
  }
};

console.log(produkt.opis()); // Wynik: Laptop kosztuje 3500 zł.

• Przykład 3: Tablica obiektów (np. lista uczniów)

let uczniowie = [
  { imie: "Kasia", wiek: 17 },
  { imie: "Bartek", wiek: 18 },
  { imie: "Ola", wiek: 16 }
];

uczniowie.forEach(u => console.log(u.imie + " ma " + u.wiek + " lat."));

Zadania - Tablice i obiekty w JS

Zadanie 1 - Tworzenie tablicy i wyświetlanie jej elementów

Napisz program, który utworzy tablicę z nazwami kilku owoców i wyświetli wszystkie elementy w konsoli.

• Utwórz tablicę o nazwie owoce, zawierającą np. "jabłko", "banan", "gruszka", "śliwka".

• Użyj pętli for, aby wypisać każdy element tablicy w konsoli.

• Dodatkowo, wypisz długość tablicy (.length).

Wynik działania programu:

jabłko  
banan  
gruszka  
śliwka  
Liczba owoców: 4

Zadanie 2 - Dodawanie i usuwanie elementów (push, pop)

Napisz program, który doda i usunie elementy z tablicy.

• Utwórz tablicę liczby z wartościami [10, 20, 30].

• Użyj metody .push(), aby dodać dwie nowe liczby.

• Następnie użyj .pop(), aby usunąć ostatni element.

• Wyświetl tablicę po każdej operacji.

Wynik działania programu:

Po dodaniu: [10, 20, 30, 40, 50]  
Po usunięciu: [10, 20, 30, 40]

Zadanie 3 - Przetwarzanie elementów (map, filter, forEach)

Napisz program, który przekształci i odfiltruje liczby z tablicy.

• Utwórz tablicę liczby = [5, 10, 15, 20, 25].

• Użyj .map(), aby utworzyć nową tablicę z wartościami pomnożonymi przez 2.

• Użyj .filter(), aby zostawić tylko liczby większe od 20.

• Za pomocą .forEach() wypisz każdą liczbę w konsoli.

Wynik działania programu:

Nowa tablica: [10, 20, 30, 40, 50]  
Liczby większe od 20: [30, 40, 50]  
Wypisane liczby:  
30  
40  
50

Zadanie 4 - Tworzenie obiektu i odczyt danych

Napisz program, który utworzy obiekt samochod i wyświetli jego dane.

• Utwórz obiekt samochod z właściwościami: marka, model, rok.

• Dodaj nową właściwość kolor i przypisz jej wartość.

• Wyświetl w konsoli opis samochodu w formacie:
  "Samochód marki [marka] model [model] z roku [rok] ma kolor [kolor]."

Wynik działania programu:

Samochód marki Toyota model Corolla z roku 2020 ma kolor srebrny.

Zadanie 5 - Obiekt z metodą

Napisz program, który utworzy obiekt kalkulator z dwiema metodami: dodaj(a, b) i odejmij(a, b).

• Zdefiniuj obiekt z obiema metodami.

• Wywołaj metody z różnymi argumentami i wyświetl wyniki w konsoli.

Wynik działania programu:

Wynik dodawania: 8  
Wynik odejmowania: 3

Zadanie 6 - Tablica obiektów

Napisz program, który przechowuje dane o kilku osobach w tablicy obiektów.

• Utwórz tablicę osoby, w której każdy element to obiekt z właściwościami: imie i wiek.

• Użyj pętli forEach(), aby wypisać imię i wiek każdej osoby w formacie:
  "Jan ma 25 lat."

Wynik działania programu:

Kasia ma 17 lat.  
Bartek ma 18 lat.  
Ola ma 16 lat.

Zadanie 7 - Filtrowanie obiektów w tablicy

Napisz program, który z tablicy obiektów wybierze tylko te osoby, które są pełnoletnie.

• Skorzystaj z tablicy obiektów osoby z poprzedniego zadania.

• Użyj metody .filter(), aby utworzyć nową tablicę pelnoletni.

• Wypisz w konsoli imiona osób pełnoletnich.

Wynik działania programu:

Osoby pełnoletnie: Bartek