W JavaScript istnieje wiele narzędzi do przechowywania danych, takich jak klasyczne obiekty i tablice.
Jednak wraz z wprowadzeniem ECMAScript 6 (ES6) pojawiły się bardziej elastyczne struktury danych, takie jak Map i Set, które sto mogą być lepszym wyborem do zarządzania danymi.
Z tego wpisu dowiesz się jak korzystać z tych struktur, a także jak przeprowadzać konwersję między nimi a innymi typami danych.
Map w JavaScript – Co to takiego?
Mapa (ang. Map) w JavaScript to struktura danych, która przechowuje pary klucz-wartość.
W przeciwieństwie do tradycyjnych obiektów, Map pozwala na używanie dowolnego typu danych jako klucza, co daje większą elastyczność w porównaniu do klasycznych obiektów.
Tworzenie mapy
Aby utworzyć nową mapę, należy użyć konstruktora new Map():
const mapa = new Map();
W taki sposób tworzymy nową, pustą mapę, gotową do użycia.
Dodawanie danych do mapy
Dane można dodawać do Mapy za pomocą metody set(), która przyjmuje dwa argumenty: klucz oraz wartość.
Klucz może być dowolnego typu – może to być liczba, ciąg znaków, a nawet obiekt.
const mapa = new Map();
mapa.set(1, "Jan");
mapa.set(2, "Maria");
mapa.set("zwierzę", "Słoń");
W powyższym przykładzie tworzymy mapę z trzema wpisami: kluczami są liczby oraz ciąg znaków.
Pobieranie danych z mapy
Aby pobrać wartość z mapy, używamy metody get():
console.log(mapa.get(1)); // Jan
console.log(mapa.get("zwierzę")); // Słoń
prawdzanie obecności klucza w mapie
Za pomocą metody has() możemy sprawdzić, czy dany klucz istnieje w mapie:
console.log(mapa.has(2)); // true
console.log(mapa.has(10)); // false
Usuwanie elementów z mapy
Aby usunąć element z mapy, można skorzystać z metody delete(), przekazując odpowiedni klucz:
mapa.delete(2);
console.log(mapa);
Powyższy kod usuwa klucz 2 z mapy.
Iterowanie po mapie
Mapy można iterować za pomocą pętli for...of lub metody forEach():
mapa.set(1, "Jan");
mapa.set(2, "Maria");
mapa.set("zwierzę", "Słoń");
// Iteracja przy pomocy for...of
for (const [key, value] of mapa) {
console.log(`${key}: ${value}`);
}
// Iteracja przy pomocy forEach
mapa.forEach((value, key) => {
console.log(`${key}: ${value}`);
});
Kiedy warto używać Map?
Map jest przydatne, gdy potrzebujemy elastycznej struktury danych, w której klucze mogą być różnego typu, w tym prymitywne wartości jak liczby, ciągi znaków czy obiekty.
Mapa zachowuje także kolejność dodawanych elementów, co może być kluczowe w niektórych zastosowaniach.
Dodatkowo, w przeciwieństwie do zwykłych obiektów, Map lepiej obsługuje przypadki częstego dodawania i usuwania elementów.
Set w JavaScript – Zbiór Unikalnych Wartości
Set to kolejna struktura danych w JavaScript, która pozwala na przechowywanie unikalnych wartości. Oznacza to, że nie ma możliwości dodania duplikatów do Set.
Struktura ta działa podobnie do tablic, ale zapewnia, że każdy element jest unikalny.
Tworzenie nowego Set
Aby stworzyć Set, używamy konstruktora new Set():
const set = new Set();
Dodawanie danych do Set
Dane można dodawać do Set za pomocą metody add():
set.add(1);
set.add(2);
set.add(2); // Duplikat zostanie zignorowany
set.add(3);
console.log(set); // Set(3) {1, 2, 3}
Warto zauważyć, że Set automatycznie eliminuje duplikaty.
Sprawdzanie obecności elementów w Set
Aby sprawdzić, czy dany element istnieje w Set, używamy metody has():
console.log(set.has(2)); // true
console.log(set.has(5)); // false
Usuwanie elementów z Set
Aby usunąć element z Set, można skorzystać z metody delete():
set.delete(1);
console.log(set); // Set(2) {2, 3}
Możemy także usunąć wszystkie elementy za pomocą metody clear():
set.clear();
console.log(set); // Pusty Set
Iterowanie po Set
Możemy iterować po elementach w Set za pomocą pętli for...of lub metody forEach():
set.add(1);
set.add(2);
set.add(3);
// Pętla for...of
for (const value of set) {
console.log(value);
}
// Metoda forEach
set.forEach((value) => {
console.log(value);
});
Kiedy warto używać Set?
Set jest doskonałym narzędziem, gdy potrzebujemy przechowywać unikalne wartości i zależy nam na eliminacji duplikatów.
Może być stosowany na przykład do filtrowania zbiorów danych, gdzie musimy zapewnić, że każdy element występuje tylko raz.
WeakMap i WeakSet – Zaawansowane Struktury Danych 🧠
WeakMap i WeakSet to specjalne wersje Map i Set, które przechowują swoje klucze (w przypadku WeakMap) lub wartości (w przypadku WeakSet) jako słabe referencje.
Oznacza to, że jeśli do klucza lub wartości nie ma innych odniesień, mogą one zostać usunięte automatycznie przez mechanizm Garbage Collection.
Tworzenie WeakMap i WeakSet
Aby utworzyć WeakMap lub WeakSet, należy użyć odpowiednich konstruktorów:
const weakMap = new WeakMap();
const weakSet = new WeakSet();
Kiedy warto używać WeakMap i WeakSet?
WeakMap i WeakSet są idealne do sytuacji, w których chcemy przechowywać odniesienia do obiektów, ale chcemy, aby mechanizm Garbage Collection automatycznie zarządzał ich usuwaniem, gdy nie są już potrzebne.
Przykładem może być przechowywanie danych użytkowników w kontekście interfejsu graficznego, gdzie elementy DOM mogą być usuwane dynamicznie.
Konwersja między Mapami, Setami i innymi Kolekcjami Konwersja Tablica → Mapa
Aby przekonwertować tablicę na Mapę, możemy użyć konstruktora Map i przekazać dwuwymiarową tablicę jako argument:
const arr = [
[1, "Jan"],
[2, "Maria"],
];
const mapa = new Map(arr);
console.log(mapa); // Map(2) { 1 => "Jan", 2 => "Maria" }
Konwersja Mapa → Tablica
Aby przekonwertować Mapę z powrotem na tablicę, możemy skorzystać z metody Array.from():
const arrFromMap = Array.from(mapa);
console.log(arrFromMap); // [[1, 'Jan'], [2, 'Maria']]
Konwersja Set → Tablica
Podobnie jak w przypadku map, możemy przekonwertować Set na tablicę:
const set = new Set([1, 2, 3]);
const arrFromSet = Array.from(set);
console.log(arrFromSet); // [1, 2, 3]
Konwersja Tablica → Set
Przekształcenie tablicy na Set jest równie proste:
const arr = [1, 1, 2, 3, 3];
const set = new Set(arr);
console.log(set); // Set(3) {1, 2, 3}
Interfejs i Implementacja Map i Set w JavaScript
Warto zauważyć, że zarówno Map, jak i Set implementują interfejsy iterowalne, co oznacza, że możemy z łatwością iterować po ich elementach za pomocą pętli for...of lub innych metod.
Obie struktury są częścią nowoczesnych interfejsów w JavaScript, które ułatwiają zarządzanie kolekcjami danych.
Podsumowanie
Map i Set w JavaScript to struktury danych wprowadzone w ES6, które oferują elastyczne i efektywne narzędzia do pracy z danymi.
Dzięki możliwości użycia różnych typów danych jako kluczy oraz eliminacji duplikatów, te struktury danych znajdują szerokie zastosowanie w codziennym programowaniu.
Dzięki dodatkowym możliwościom, takim jak WeakMap i WeakSet, możemy lepiej zarządzać pamięcią i odniesieniami w złożonych aplikacjach.
Zacznij korzystać z Map i Set w swoich projektach, aby lepiej organizować dane i zarządzać nimi w bardziej efektywny sposób!
