Przetwarzanie tablic — od danych do rankingu

Po tej lekcji potrafisz

Kto awansował do finału?

Masz wyniki wszystkich osób, ale raport ma pokazać tylko aktywnych finalistów, od najlepszego. Podziel pracę na kroki: wybór, uporządkowanie, opis. Każdy krok będzie miał czytelny wynik.

Małe kroki, konkretne efekty

Wybór metody zależy od wyniku

map tworzy nową wartość dla każdego elementu, filter wybiera elementy, find zwraca pierwszy pasujący lub undefined. some pyta „czy którykolwiek?”, every „czy wszystkie?”.

const punkty = [20, 50, 80];
console.log(punkty.map(p => p + 5).join(","));
console.log(punkty.filter(p => p >= 50).join(","));
console.log(punkty.find(p => p >= 50));
console.log(punkty.some(p => p === 80), punkty.every(p => p >= 50));

25,55,85
50,80
50
true false

Dla pustej tablicy some daje false, every true. Nie ma elementu łamiącego warunek. Jeśli potrzebujesz przynajmniej jednej osoby, dodaj sprawdzenie length > 0.

reduce zbiera wynik, sort zmienia kolejność

reduce przekazuje akumulator i kolejny element do callbacku. Wartość początkowa obsługuje także pustą tablicę. sort bez komparatora porównuje tekstowe reprezentacje, więc do liczb podaj (a, b) => a – b.

const liczby = [10, 2, 30];
const suma = liczby.reduce((razem, n) => razem + n, 0);
const rosnaco = [...liczby].sort((a, b) => a - b);
console.log(suma, rosnaco.join(","));
console.log(liczby.join(","));

42 2,10,30
10,2,30

Ujemny wynik komparatora oznacza, że a powinno być przed b; dodatni — odwrotnie, a zero równorzędność sortowania. Spread zabezpiecza kolejność oryginalnej tablicy.

Ranking finalistów

Remis punktowy rozstrzygamy alfabetycznie po nicku. Dla danych ćwiczeniowych używamy nicków bez polskich znaków.

interface Gracz { nick: string; punkty: number; aktywny: boolean }
const gracze: Gracz[] = [
  { nick: "Neo", punkty: 70, aktywny: true },
  { nick: "Ala", punkty: 90, aktywny: true },
  { nick: "Max", punkty: 99, aktywny: false },
  { nick: "Ola", punkty: 70, aktywny: true }
];
const finalisci = gracze
  .filter(g => g.aktywny && g.punkty >= 50)
  .sort((a, b) => b.punkty - a.punkty || a.nick.localeCompare(b.nick, "pl"));
finalisci.forEach((g, i) => console.log((i + 1) + ". " + g.nick + " " + g.punkty));
console.log("Suma: " + finalisci.reduce((s, g) => s + g.punkty, 0));

1. Ala 90
2. Neo 70
3. Ola 70
Suma: 230

Jak program dochodzi do wyniku

1. filter tworzy nową tablicę, więc następujący po nim sort nie zmienia kolejności gracze.
2. b.punkty – a.punkty daje porządek malejący.
3. Gdy różnica wynosi zero, || uruchamia porównanie nicków. To celowy wybór przy remisie.
4. Obiekty graczy pozostają wspólne między tablicami. Nie zmieniamy ich pól w callbackach.

Zmień kod i zobacz, co się stanie

flatMap łączy mapowanie i spłaszczenie

Gdy jeden element ma dać kilka wyników, flatMap spłaszcza wynik o jeden poziom. Z kolei findIndex daje indeks lub -1, co trzeba sprawdzić przed usuwaniem.

const grupy = [["Ala", "Neo"], ["Ola"]];
console.log(grupy.flatMap(grupa => grupa).join(", "));
const lista = ["Ala", "Neo"];
const indeks = lista.findIndex(nick => nick === "Max");
if (indeks !== -1) { lista.splice(indeks, 1); }
console.log(lista.join(", "));

Ala, Neo, Ola
Ala, Neo

splice(-1, 1) usunęłoby ostatni element — mimo braku szukanego nicku. W nowszym JavaScripcie są też toSorted, toReversed i toSpliced, które zwracają nowe tablice; wymagają odpowiedniego środowiska i biblioteki typów ES2023. W naszym ustawieniu ES2022 stosujemy kopię i poznane metody.

Gdy wynik zaskakuje

Teraz Twoja kolej

Rozwiązanie jest jedną z możliwości. Zanim je odkryjesz, uruchom własną wersję dla podanych danych i przynajmniej jednego przypadku brzegowego.

const ceny = [10, 20];
console.log(ceny.map(c => c + 5).join(","));
console.log(ceny.join(","));

15,25
10,20

function gotowa(gracze: boolean[]): boolean { return gracze.length > 0 && gracze.every(g => g); }
console.log(gotowa([]), gotowa([true, true]), gotowa([true, false]));

false true false

const wyniki = [30, 100, 20, 80];
const podium = [...wyniki].sort((a, b) => b - a).slice(0, 3);
console.log(podium.join(","));
console.log(wyniki.join(","));

100,80,30
30,100,20,80

type Pozycja = { cena: number; sztuki: number };
function raport(koszyk: Pozycja[]) {
  return koszyk.reduce((s, p) => ({ sztuki: s.sztuki + p.sztuki, koszt: s.koszt + p.cena * p.sztuki }), { sztuki: 0, koszt: 0 });
}
console.log(JSON.stringify(raport([{ cena: 10, sztuki: 2 }, { cena: 5, sztuki: 3 }])));
console.log(JSON.stringify(raport([])));

{"sztuki":5,"koszt":35}
{"sztuki":0,"koszt":0}

Co zabierasz do następnej lekcji

• Wybierz metodę po rodzaju potrzebnego wyniku.
• Pilnuj pustych list i braku dopasowania.
• Nowa tablica może nadal zawierać te same obiekty.