Jak prawidłowo korzystać z obiektu map w JavaScript

By /

JavaScript

Mapa w JavaScript to kolekcja klucz-wartość, gdzie każdy klucz jest unikalny. W przeciwieństwie do obiektów, klucze w mapie mogą być dowolnego typu, a nie tylko łańcuchów lub symboli. Mapy oferują lepszą wydajność dla dużych zbiorów danych i są bardziej elastyczne niż obiekty, jeśli chodzi o manipulację danymi. W tej lekcji przyjrzymy się, jak tworzyć mapy, dodawać do nich elementy, usuwać je, a także jak iterować po mapach.

Tworzenie mapy i dodawanie elementów

Pierwszym krokiem jest stworzenie nowej mapy, a następnie dodanie do niej elementów. Zobaczmy prosty przykład:

// Tworzenie nowej mapy
let map = new Map();

// Dodawanie elementów do mapy
map.set('klucz1', 'wartość1');
map.set('klucz2', 'wartość2');
map.set('klucz3', 'wartość3');

Każdy element mapy składa się z pary klucz-wartość, gdzie metoda set służy do dodawania nowych elementów.

Odczytywanie wartości i usuwanie elementów

Aby odczytać wartość skojarzoną z kluczem, używamy metody get. Jeśli klucz nie istnieje w mapie, metoda zwróci undefined.

// Odczytywanie wartości dla klucza
let value = map.get('klucz1'); // Zwraca 'wartość1'
console.log(value);

// Usuwanie elementu z mapy
map.delete('klucz2'); // Usuwa element z kluczem 'klucz2'

Iteracja po mapie

Mapy w JavaScript mogą być iterowane przy użyciu pętli for...of lub metod forEach.

// Iteracja przy użyciu pętli for...of
for (let [key, value] of map) {
    console.log(key + ' = ' + value);
}

// Iteracja przy użyciu metody forEach
map.forEach(function(value, key) {
    console.log(key + ' = ' + value);
});

Kolejny przykład

<!DOCTYPE html>
<html>
<head>
    <title>Przykład użycia mapy w JavaScript</title>
</head>
<body>
    <div id="mapContent"></div>

    <script>
        let map = new Map();
        map.set('klucz1', 'wartość1');
        map.set('klucz2', 'wartość2');

        let content = '';
        map.forEach(function(value, key) {
            content += `<p>${key}: ${value}</p>`;
        });

        document.getElementById('mapContent').innerHTML = content;
    </script>
</body>
</html>

W tym przykładzie tworzymy mapę, dodajemy do niej elementy, a następnie używamy metody forEach do generowania kodu HTML, który zostanie wyświetlony na stronie.

Podsumowanie

Mapy w JavaScript są potężnym narzędziem do przechowywania par klucz-wartość. Dzięki możliwości użycia dowolnego typu danych jako klucza i wbudowanym metodą do manipulacji danymi, mapy są bardziej elastyczne i wydajne niż tradycyjne obiekty. Używanie map jest szczególnie zalecane, gdy potrzebujemy szybkiego dostępu do elementów, dodawania lub usuwania danych, a także gdy klucze nie są ciągami znaków.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video JavaScript w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

 

Powiązane artykuły

Scroll to Top