Zadania na lekcje

Tablice: Transformacja danych (Map)

Javascript
Priorytet: Normalny Szkic

Zadanie 4.5: Transformacja (Map)

Wstęp

Często masz dane w jednym formacie (np. ceny netto), a potrzebujesz ich w innym (ceny brutto). Zamiast tworzyć pustą tablicę i używać pętli for z push, możesz użyć metody map. Jest to chleb powszedni w bibliotekach takich jak React.

Cel zadania

Zrozumienie działania .map(), która transformuje każdy element tablicy "A" i tworzy tablicę "B" o tej samej długości.

Jak to działa?

Metoda map bierze funkcję, wykonuje ją dla każdego elementu i zwraca nową tablicę z wynikami.

const numbers = [2, 4, 6];

// Chcemy podwoić każdą liczbę
const doubled = numbers.map(num => num * 2);

console.log(doubled); // [4, 8, 12]
// Oryginał pozostaje bez zmian!
console.log(numbers); // [2, 4, 6]

Przykład z obiektami (bardzo częsty w pracy):

const users = [
    { name: "Jan", surname: "Kowalski" },
    { name: "Anna", surname: "Nowak" }
];

// Chcemy tablicę samych imion
const names = users.map(user => user.name);
console.log(names); // ["Jan", "Anna"]

Kroki do wykonania

Scenariusz: Formatowanie cen

Masz cennik netto w sklepie:

const netPrices = [100, 250, 50, 10];
const tax = 0.23; // 23% VAT
  1. Użyj .map(), aby stworzyć tablicę grossPrices (Ceny brutto).
    • Wzór: cena * (1 + tax).
    • Wynik zaokrąglij do całości (opcjonalnie użyj Math.round()).
  2. Masz tablicę imion: ["jan", "anna", "marek"]. Użyj .map(), aby zamienić pierwsze litery na duże (Capitalize).
    • Podpowiedź: str[0].toUpperCase() + str.slice(1).

[!IMPORTANT] Commit: Zadanie 4.5 - Metoda Map.

Zadanie dla chętnych (HTML Generator)

Użyj .map(), aby zamienić tablicę owoców ["Jabłko", "Banan"] w tablicę stringów HTML: ["<li>Jabłko</li>", "<li>Banan</li>"]. Następnie użyj .join("") i wstaw wynik do innerHTML listy na stronie (jeśli znasz podstawy DOM).