3.1 Kolekcja Map
W ECMAScript 2015 (ES6) do JavaScript dodano dwie nowe struktury danych: Map i Set.
Te struktury dostarczają bardziej elastyczne i efektywne sposoby przechowywania i zarządzania kolekcjami danych
w porównaniu z tradycyjnymi obiektami i tablicami.
Map to struktura danych, która pozwala przechowywać pary klucz-wartość, gdzie klucze
mogą być dowolnego typu, w tym także obiekty i funkcje.
1. Tworzenie i inicjalizacja Map:
const map = new Map();
2. Dodawanie elementów:
Metoda set jest używana do dodawania nowych par klucz-wartość do Map.
map.set('key1', 'value1');
map.set(2, 'value2');
map.set({ name: 'objectKey' }, 'value3');
3. Pobieranie elementów:
Metoda get jest używana do pobierania wartości na podstawie klucza.
const map = new Map();
map.set('key1', 'value1');
map.set(2, 'value2');
map.set({ name: 'objectKey' }, 'value3');
console.log(map.get('key1')); // 'value1'
console.log(map.get(2)); // 'value2'
4. Sprawdzanie obecności klucza:
Metoda has sprawdza, czy klucz istnieje w Map.
const map = new Map();
map.set('key1', 'value1');
map.set(2, 'value2');
map.set({ name: 'objectKey' }, 'value3');
console.log(map.has('key1')); // true
console.log(map.has('key3')); // false
5. Usuwanie elementów:
Metoda delete usuwa element na podstawie klucza.
const map = new Map();
map.set('key1', 'value1');
map.set(2, 'value2');
map.set({ name: 'objectKey' }, 'value3');
map.delete('key1');
console.log(map.has('key1')); // false
6. Czyszczenie Map:
Metoda clear usuwa wszystkie elementy z Map.
const map = new Map();
map.set('key1', 'value1');
map.set(2, 'value2');
map.set({ name: 'objectKey' }, 'value3');
map.clear();
console.log(map.size); // 0
7. Iteracja po Map:
Możesz użyć pętli for...of do iteracji po Map.
Przykład:
const map = new Map();
map.set('key1', 'value1');
map.set(2, 'value2');
for (const [key, value] of map) {
console.log(`${key}: ${value}`);
}
// 'key1: value1'
// '2: value2'
3.2 Kolekcja Set
Set to struktura danych, która pozwala przechowywać unikalne wartości dowolnego typu,
w tym obiekty i prymitywy.
1. Tworzenie i inicjalizacja Set:
const set = new Set();
2. Dodawanie elementów:
Metoda add jest używana do dodawania nowych wartości do Set.
set.add(1);
set.add('value2');
set.add({ name: 'objectValue' });
3. Sprawdzanie obecności wartości:
Metoda has sprawdza, czy wartość istnieje w Set.
const set = new Set();
set.add(1);
set.add('value2');
set.add({ name: 'objectValue' });
console.log(set.has(1)); // true
console.log(set.has('value3')); // false
4. Usuwanie elementów:
Metoda delete usuwa wartość z Set.
const set = new Set();
set.add(1);
set.add('value2');
set.add({ name: 'objectValue' });
set.delete(1);
console.log(set.has(1)); // false
5. Czyszczenie Set:
Metoda clear usuwa wszystkie elementy z Set.
const set = new Set();
set.add(1);
set.add('value2');
set.add({ name: 'objectValue' });
set.clear();
console.log(set.size); // 0
6. Iteracja po Set:
Możesz użyć pętli for...of do iteracji po Set.
const set = new Set();
set.add(1);
set.add('value2');
for (const value of set) {
console.log(value);
}
// 1
// 'value2'
3.3 Porównanie Map i Set
Zalety Map:
- Dowolne klucze: w
Mapklucze mogą być dowolnego typu, w tym obiekty i funkcje, w przeciwieństwie do obiektów, gdzie kluczami mogą być tylko łańcuchy lub symbole. - Uporządkowane elementy: elementy w
Mapzachowują kolejność dodawania, co ułatwia iterację po nich w kolejności dodania. - Rozmiar kolekcji: metoda
sizepozwala szybko uzyskać liczbę elementów wMap.
Zalety Set:
- Unikalne wartości:
Setautomatycznie zapewnia, że wszystkie jego elementy są unikalne. - Uporządkowane elementy: elementy w
Setzachowują kolejność dodawania, co ułatwia iterację po nich w kolejności dodania. - Optymalizowane operacje:
Setoferuje zoptymalizowane metody do dodawania, usuwania i sprawdzania obecności elementów.
Praktyczne przykłady
Przykład użycia Map do przechowywania informacji o użytkownikach:
const users = new Map();
users.set(1, { name: 'Alice', age: 25 });
users.set(2, { name: 'Bob', age: 30 });
for (const [id, user] of users) {
console.log(`User ID: ${id}, Name: ${user.name}, Age: ${user.age}`);
}
// User ID: 1, Name: Alice, Age: 25
// User ID: 2, Name: Bob, Age: 30
Przykład użycia Set do filtrowania unikalnych wartości:
const numbers = [1, 2, 3, 1, 2, 4, 5, 3];
const uniqueNumbers = new Set(numbers);
for (const number of uniqueNumbers) {
console.log(number);
}
// 1
// 2
// 3
// 4
// 5
GO TO FULL VERSION