Map

Kolekcja par klucz i wartość, w której kluczem może być dowolna wartość, a kolejność dodawania jest zachowana.

Zwraca: Nowy obiekt Map.

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Parametry
Więcej przykładów
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

JavaScript

const scores = new Map()

scores.set('Ania', 120).set('Kuba', 95)
scores.set('Ania', 150)

console.log(scores.get('Ania'))
console.log(scores.has('Ola'))
console.log(scores.size)
console.log(scores)

Konsola

150

false

Map(2) { 'Ania' => 150, 'Kuba' => 95 }

Definicja i zastosowanie

Map przechowuje pary klucz i wartość, podobnie jak zwykły obiekt, ale ma kilka ważnych przewag. Kluczem może być wszystko: liczba, obiekt czy funkcja, a nie tylko napis. Liczbę par odczytasz od razu z właściwości size, a kolejność przechodzenia po mapie zawsze odpowiada kolejności dodawania.

Podstawowe metody to set(klucz, wartość) do zapisu, get(klucz) do odczytu, has(klucz) do sprawdzenia, delete(klucz) do usunięcia i clear() do wyczyszczenia całej mapy. Metoda set() zwraca mapę, więc wywołania można łączyć w łańcuch.

Po mapie przejdziesz pętlą for...of, która zwraca pary [klucz, wartość], albo metodą forEach(). Metody keys(), values() i entries() zwracają iteratory, które łatwo zamienić na tablicę: [...map.keys()].

Wybierz Map, gdy często dodajesz i usuwasz elementy albo klucze nie są napisami. Zwykły obiekt zostaw dla danych o stałym kształcie, takich jak { name, level }, i do zapisu w formacie JSON.

Składnia

new Map()
new Map(iterable)

map.set(key, value)
map.get(key)
map.has(key)
map.delete(key)
map.clear()
map.size

Parametry

iterable
opcjonalny
Tablica par [klucz, wartość] albo inny obiekt iterowalny z parami, np. wynik Object.entries().

Parametr	Typ	Opis
iterable	opcjonalny	Tablica par `[klucz, wartość]` albo inny obiekt iterowalny z parami, np. wynik `Object.entries()`.

Więcej przykładów

Obiekt jako klucz

JavaScript

const ania = { name: 'Ania' }
const kuba = { name: 'Kuba' }

const lastSeen = new Map([
  [ania, 'wczoraj'],
  [kuba, 'dziś']
])

console.log(lastSeen.get(ania))
console.log(lastSeen.get({ name: 'Ania' }))

Konsola

wczoraj

undefined

Klucze obiektowe są porównywane przez referencję. Nowy obiekt { name: "Ania" } wygląda tak samo, ale to inny obiekt niż ania.

Przechodzenie po mapie i zamiana na obiekt

JavaScript

const cart = new Map([
  ['Kurs HTML', 49],
  ['Kurs CSS', 59]
])

for (const [course, price] of cart) {
  console.log(`${course}: ${price} zł`)
}

console.log([...cart.keys()])
console.log(Object.fromEntries(cart))

Konsola

Kurs HTML: 49 zł

Kurs CSS: 59 zł

['Kurs HTML', 'Kurs CSS']

{ 'Kurs HTML': 49, 'Kurs CSS': 59 }

Licznik wystąpień

JavaScript

const answers = ['B', 'A', 'B', 'C', 'B']
const counts = new Map()

for (const answer of answers) {
  counts.set(answer, (counts.get(answer) ?? 0) + 1)
}

console.log(counts)

Konsola

Map(3) { 'B' => 3, 'A' => 1, 'C' => 1 }

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

JSON.stringify() zamienia mapę na pusty obiekt {}. Przed zapisem przekształć ją przez Object.fromEntries(map) albo [...map].
Nie zapisuj danych przez map[klucz] = wartość. Tworzy to zwykłą właściwość obiektu, której get(), has() i size nie widzą.
Do liczenia wystąpień wzór map.set(k, (map.get(k) ?? 0) + 1) jest krótki i czytelny.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz JavaScript w kursie JavaScript i ReactZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs