Zrozumienie zestawów w JavaScript

Wraz z wprowadzeniem ES6 do JavaScript, zyskaliśmy nową strukturę danych – zbiory (Set). Przyjrzyjmy się im bliżej.

Czym charakteryzują się zbiory?

Jak efektywnie wykorzystać je w JavaScript?

Jakie metody ułatwiają pracę z nimi?

W tym artykule znajdziemy odpowiedzi na wszystkie te pytania.

Zbiory (Set)

Zbiór, jak sama nazwa wskazuje, to kolekcja unikatowych elementów. Nie dopuszcza on do przechowywania duplikatów.

W JavaScript, elementy w zbiorach przechowywane są w kolejności ich dodawania, co czyni zbiory uporządkowaną strukturą danych. Mogą one zawierać zarówno wartości prymitywne (np. liczby, ciągi znaków), jak i obiekty.

Przeanalizujmy składnię tworzenia zbiorów w JavaScript.

Zachęcam do korzystania z IDE, aby na bieżąco testować prezentowane przykłady.

const imiona = new Set(["Jan", "Henryk", "Wiktor", "Jacek", "Henryk"]);
console.log(imiona);

const losowyTekst = new Set("Heeeeeeej");
console.log(losowyTekst);

const numery = new Set([5, 5, 5, 2, 1, 1, 2, 3]);
console.log(numery);

Właściwości i Metody

Zbiory dysponują zestawem właściwości i metod, które ułatwiają manipulację danymi. Ich obsługa jest intuicyjna, a funkcjonalność wynika wprost z ich nazw. Przyjrzyjmy się im po kolei.

rozmiar (size)

Właściwość `size` zwraca liczbę elementów zawartych w zbiorze.

const imiona = new Set(["Jan", "Henryk", "Wiktor", "Jacek", "Henryk"]);
console.log(`Rozmiar: ${imiona.size}`);

Dodaj (add)

Metoda `add` służy do wstawiania nowego elementu do zbioru. Jeżeli element już istnieje, nie zostanie dodany ponownie.

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

imiona.add("Jan");
imiona.add("Henryk");
imiona.add("Wiktor");
imiona.add("Jacek");
imiona.add("Henryk");

console.log(imiona);

Ma (has)

Metoda `has` przyjmuje jeden argument i zwraca wartość logiczną `true`, jeżeli element znajduje się w zbiorze, w przeciwnym przypadku zwraca `false`.

const imiona = new Set(["Jan", "Henryk", "Wiktor", "Jacek", "Henryk"]);

console.log(imiona.has("Henryk"));
console.log(imiona.has("Alicja"));

Usuń (delete)

Metoda `delete` przyjmuje argument i usuwa go ze zbioru. Nie zgłasza błędu, nawet jeśli argument nie jest obecny w zbiorze.

const imiona = new Set(["Jan", "Henryk", "Wiktor", "Jacek", "Henryk"]);

imiona.delete("Jan");

console.log(imiona);

Wpisy (entries)

Metoda `entries` zwraca iterator zawierający tablice par klucz-wartość, w kolejności wstawiania elementów. W przypadku zbiorów, klucz i wartość są identyczne.

const imiona = new Set(["Jan", "Henryk", "Wiktor", "Jacek", "Henryk"]);

const wpisy = imiona.entries();

console.log(wpisy.next().value);
console.log(wpisy.next().value);
console.log(wpisy.next().value);
console.log(wpisy.next().value);
console.log(wpisy.next().value);

Klucze (keys)

Metoda `keys` zwraca iterator elementów zbioru, w kolejności ich dodawania.

const imiona = new Set(["Jan", "Henryk", "Wiktor", "Jacek", "Henryk"]);

const klucze = imiona.keys();

console.log(klucze.next().value);
console.log(klucze.next().value);
console.log(klucze.next().value);
console.log(klucze.next().value);
console.log(klucze.next().value);

Wartości (values)

Metoda `values` zwraca iterator elementów zbioru w kolejności ich wstawiania, podobnie jak metoda `keys`.

const imiona = new Set(["Jan", "Henryk", "Wiktor", "Jacek", "Henryk"]);

const wartosci = imiona.values();

console.log(wartosci.next().value);
console.log(wartosci.next().value);
console.log(wartosci.next().value);
console.log(wartosci.next().value);
console.log(wartosci.next().value);

Wyczyść (clear)

Metoda `clear` usuwa wszystkie elementy ze zbioru.

const imiona = new Set(["Jan", "Henryk", "Wiktor", "Jacek", "Henryk"]);

imiona.clear();

console.log(imiona);

Dla każdego (forEach)

Metoda `forEach` służy do iteracji po zbiorze i przetwarzania każdego elementu.

const imiona = new Set(["Jan", "Henryk", "Wiktor", "Jacek", "Henryk"]);

imiona.forEach((element) => {
   console.log(element);
});

Praktyczne Zastosowanie

Prześledźmy prosty przykład zastosowania zbiorów. Mając daną tablicę, naszym celem jest usunięcie z niej wszystkich duplikatów. Zbiory idealnie nadają się do tego celu.

Zobaczmy, jak rozwiązać ten problem krok po kroku:

• Zdefiniuj tablicę z przykładowymi danymi.
• Utwórz pusty zbiór.
• Iteruj po tablicy, dodając każdy element do zbioru. Duplikaty zostaną automatycznie pominięte.
• Utwórz pustą tablicę.
• Iteruj po zbiorze, dodając każdy element do nowej tablicy.
• Wyświetl zawartość nowej tablicy.

Zachęcam do samodzielnego rozwiązania zadania. Jeżeli potrzebujesz wsparcia, poniżej znajdziesz gotowe rozwiązanie.

const tablica = ["Jan", "Henryk", "Wiktor", "Jacek", "Henryk"];

const tymczasowyZbior = new Set();

tablica.forEach((element) => {
   tymczasowyZbior.add(element);
});

const nowaTablica = [];

tymczasowyZbior.forEach((element) => {
   nowaTablica.push(element);
});

console.log(nowaTablica);

Podsumowanie

Posiadasz już kompletną wiedzę na temat pracy ze zbiorami w JavaScript. Możesz śmiało wykorzystywać je w swoich projektach. Zachęcam do eksploracji i eksperymentowania.

Udanego kodowania! 👨‍💻