Zadanie 5.1: Kolekcje: Set i Map

Wstęp

Tablice i Obiekty to fundamenty JavaScriptu, ale mają swoje ograniczenia. Tablice pozwalają na duplikaty, co nie zawsze jest pożądane. Klucze w Obiektach zawsze są zamieniane na tekst (String), co bywa problematyczne. W ES6 wprowadzono Set (Zbiór) i Map (Mapę), które rozwiązują te problemy.

Cel zadania

Zrozumienie działania Set (kolekcja unikalnych wartości) oraz Map (kolekcja par klucz-wartość) i wykorzystanie ich w praktyce do zarządzania danymi.

Wymagania techniczne

1. Stworzenie zbioru Set i przetestowanie unikalności.
2. Wykorzystanie Set do usunięcia duplikatów z tablicy.
3. Stworzenie Map do przechowywania konfiguracji.
4. Iteracja po elementach kolekcji.

Kroki do wykonania

1. Set - Zbiór unikalnych wartości

Set to pudełko, które nie akceptuje powtórzeń. Jeśli wrzucisz do niego dwa razy to samo, druga próba zostanie zignorowana.

Stwórz plik collections.js:

// Tworzymy pusty zbiór
const uniqueNames = new Set();

// Dodajemy imiona
uniqueNames.add("Ania");
uniqueNames.add("Tomek");
uniqueNames.add("Ania"); // To zostanie zignorowane!

console.log("Rozmiar zbioru:", uniqueNames.size); // 2
console.log("Czy jest Ania?", uniqueNames.has("Ania")); // true

2. Usuwanie duplikatów z Tablicy

To najczęstsze zastosowanie Set. Masz tablicę z powtórzonymi tagami i chcesz mieć tylko unikalne.

const tags = ["js", "html", "css", "js", "react", "html"];

// Set automatycznie usuwa duplikaty
const uniqueTagsSet = new Set(tags);

// Zamiana z powrotem na tablicę (operatorem spread ...)
const uniqueTagsArray = [...uniqueTagsSet];

console.log(uniqueTagsArray); // ["js", "html", "css", "react"]

3. Map - Lepszy Obiekt?

W zwykłym obiekcie kluczem może być tylko napis. W Map kluczem może być wszystko (nawet inny obiekt czy funkcja). Dodatkowo, Map pamięta kolejność dodawania elementów i ma wbudowaną właściwość .size.

const userRoles = new Map();

// Mapowanie: Użytkownik (String) -> Rola (String)
userRoles.set("Jan", "Admin");
userRoles.set("Ewa", "Editor");

// Pobieranie wartości
console.log(userRoles.get("Jan")); // Admin

// Sprawdzanie istnienia klucza
if (userRoles.has("Ewa")) {
    console.log("Ewa ma przypisaną rolę.");
}

4. Iteracja

Zarówno Set jak i Map posiadają metodę .forEach, działającą podobnie jak w tablicach.

console.log("--- Role użytkowników ---");
userRoles.forEach((role, user) => {
    console.log(`${user} jest: ${role}`);
});

5. Zadanie praktyczne

1. Stwórz tablicę numbers zawierającą: [1, 2, 3, 2, 4, 1, 5].
2. Użyj Set aby stworzyć nową tablicę uniqueNumbers zawierającą tylko unikalne liczby.
3. Stwórz Map o nazwie priceList.
4. Dodaj do niej produkty: "Chleb" -> 4.50, "Mleko" -> 3.20, "Masło" -> 8.00.
5. Użytkownik kupuje "Chleb" i "Masło". Oblicz sumę korzystając z priceList.get().
6. Wypisz unikalne liczby oraz sumę zakupów w konsoli.

[!IMPORTANT] Commit: Zadanie 5.1 - Set i Map.