JavaScript - Tablice

Wyobraź sobie, że masz zapisać oceny 30 uczniów. Bez tablicy potrzebujesz 30 osobnych zmiennych i 30 linijek, żeby je zsumować. Tablica mieści wszystkie wartości w jednej zmiennej, a pętla przejdzie po nich bez względu na to, czy jest ich 3, czy 3000.

Tablica działa jak szafka z ponumerowanymi przegródkami. W każdej przegródce leży jedna wartość, a numer przegródki to indeks. Numerację zaczynamy od zera.

let nazwa = [wartość, wartość, wartość];

Do konkretnego elementu dostajesz się, podając indeks w nawiasach kwadratowych: tablica[indeks]. Właściwość length mówi, ile elementów ma tablica.

Ciekawostka: tablicę zadeklarowaną przez const też można zmieniać (owoce[1] = "kiwi" zadziała). const zabrania tylko przypisania zupełnie nowej tablicy do tej samej zmiennej.

Tablica ma wbudowane metody, czyli gotowe polecenia wywoływane po kropce. Wypróbuj je na tablicy poniżej i obserwuj, jak zmieniają się przegródki i indeksy:

Licznik pętli i przechodzi po kolejnych indeksach: 0, 1, 2… aż do ostatniego. W każdym obiegu tablica[i] to bieżący element.

for (let i = 0; i < tablica.length; i++) {
  // tablica[i] to bieżący element
}

Krok po kroku

let owoce = ["jabłko", "gruszka", "śliwka"];
for (let i = 0; i < owoce.length; i++) {
  console.log(owoce[i]);
}

Pętla może też iść od końca: startujesz od ostatniego indeksu i zmniejszasz licznik.

let t = [10, 20, 30];
for (let i = 0; i <= t.length; i++) {
  console.log(t[i]);
}

Gdy interesują Cię tylko wartości, a nie ich numery, możesz użyć krótszej pętli for…of. W każdym obiegu zmienna dostaje kolejny element tablicy.

for (const element of tablica) {
  // element to bieżąca wartość
}

Prawie każde zadanie z tablicą to jeden z tych schematów albo ich połączenie.

Wzorzec 1: suma i średnia

let suma = 0;
for (let i = 0; i < tab.length; i++) {
  suma += tab[i];
}
let srednia = suma / tab.length;

Wzorzec 2: największa i najmniejsza wartość

Zaczynasz od założenia, że pierwszy element jest największy. Potem porównujesz z nim każdy kolejny, a gdy trafisz na większy, zapamiętujesz go.

let max = t[0];
for (let i = 1; i < t.length; i++) {
  if (t[i] > max) {
    max = t[i];
  }
}

Wzorzec 3: zliczanie elementów spełniających warunek

Wzorzec 4: wyszukiwanie

Gdy znajdziesz element, zapamiętaj jego indeks i przerwij pętlę słowem break. Wartość -1 na starcie oznacza „jeszcze nie znaleziono”.

Wzorzec 5: filtrowanie do nowej tablicy

Wzorzec 6: dwie tablice z tym samym indeksem

Często dane są w dwóch tablicach: w jednej nazwy, w drugiej ceny. Element o indeksie 0 w jednej tablicy pasuje do elementu o indeksie 0 w drugiej. Wtedy potrzebujesz klasycznej pętli for z licznikiem i.

Wzorzec 7: budowanie kodu HTML z tablicy

Na egzaminie wynik często trafia na stronę jako lista albo tabela. W pętli sklejasz tekst z kodem HTML, a potem wstawiasz go na stronę. Samo wstawianie (innerHTML) poznasz na kolejnych lekcjach.

Kliknij Sprawdź. Sprawdzarka podmieni zawartość tablic z pierwszych linijek na inne dane i porówna, co wypisuje Twój program. Kod musi więc działać dla dowolnej tablicy: używaj length i pętli, a nie konkretnych liczb. Komunikaty wypisuj dokładnie w podanej postaci.

let oceny = [5, 3, 4, 6, 2];
let suma = 0;

for (let i = 0; i < oceny.length; i++) {
  suma += oceny[i];
}
console.log("Suma: " + suma);
console.log("Średnia: " + suma / oceny.length);

let temperatury = [12, -3, 18, 7, 15];
let max = temperatury[0];
let min = temperatury[0];

for (let i = 1; i < temperatury.length; i++) {
  if (temperatury[i] > max) max = temperatury[i];
  if (temperatury[i] < min) min = temperatury[i];
}
console.log("Max: " + max);
console.log("Min: " + min);

let wyniki = [45, 78, 50, 32, 91];
let zdalo = 0;

for (const w of wyniki) {
  if (w >= 50) {
    zdalo++;
  }
}
console.log("Zdało: " + zdalo + " z " + wyniki.length);

let uczniowie = ["Ania", "Bartek", "Kasia", "Damian"];
let szukany = "Kasia";
let pozycja = -1;

for (let i = 0; i < uczniowie.length; i++) {
  if (uczniowie[i] === szukany) {
    pozycja = i;
    break;
  }
}

if (pozycja !== -1) {
  console.log(szukany + ": indeks " + pozycja);
} else {
  console.log("Nie znaleziono: " + szukany);
}
// krócej: let pozycja = uczniowie.indexOf(szukany);

let liczby = [3, 4, 7, 8, 2, 9];
let parzyste = [];

for (const n of liczby) {
  if (n % 2 === 0) {
    parzyste.push(n);
  }
}

if (parzyste.length > 0) {
  console.log("Parzyste: " + parzyste.join(", "));
} else {
  console.log("Brak liczb parzystych");
}

let produkty = ["chleb", "mleko", "masło"];
let ceny = [4, 3.5, 8];
let razem = 0;

for (let i = 0; i < produkty.length; i++) {
  console.log(produkty[i] + ": " + ceny[i] + " zł");
  razem += ceny[i];
}
console.log("Razem: " + razem + " zł");

let imiona = ["Ania", "Bartek"];
let html = "<ul>";

for (const imie of imiona) {
  html += "<li>" + imie + "</li>";
}
html += "</ul>";
console.log(html);

let t = [5, 3, 4];
t[0]              // pierwszy
t[t.length - 1]   // ostatni
t[1] = 7;         // zmiana

t.push(x)     t.pop()
t.unshift(x)  t.shift()
t.indexOf(x)  t.includes(x)
t.join(", ")

for (let i = 0; i < t.length; i++) {
  t[i]
}

for (const x of t) {
  x
}

let suma = 0, max = t[0];
for (const x of t) {
  suma += x;
  if (x > max) max = x;
}
suma / t.length

let wynik = [];
for (const x of t) {
  if (warunek) wynik.push(x);
}
let poz = t.indexOf(szukany);

Na następnej lekcji: funkcje, czyli jak zamknąć kod w nazwanym bloku i używać go wiele razy.