Jak prawidłowo uzywać Set w JavaScript

By /

JavaScript

Set to nowa struktura danych wprowadzona w ES6 (ECMAScript 2015), która pozwala przechowywać unikalne wartości dowolnego typu, zarówno wartości pierwotne, jak i obiekty. W przeciwieństwie do tablic, Set nie pozwala na przechowywanie duplikatów, co sprawia, że jest idealnym rozwiązaniem do tworzenia list elementów, gdzie każdy element musi być unikalny. W tej lekcji omówimy podstawowe sposoby korzystania z Set w JavaScript.

Tworzenie i dodawanie elementów do Set

Aby utworzyć nowy Set, używamy słowa kluczowego new wraz z konstruktorem Set():

// Tworzenie nowego Set
let mySet = new Set();

Możemy dodać elementy do Set za pomocą metody add:

// Dodawanie elementów do Set
mySet.add("apple");
mySet.add("banana");
mySet.add("orange");

Przykład użycia Set

<!DOCTYPE html>
<html>
<head>
    <title>Użycie Set w JavaScript</title>
</head>
<body>
    <input type="text" id="fruitInput" 
             placeholder="Wpisz owoc i naciśnij Enter">
    <button onclick="addFruit()">Dodaj Owoc</button>
    <div id="fruits"></div>

    <script>
        // Inicjalizacja nowego Set
        let fruitsSet = new Set();

        function addFruit() {
            let input = document.getElementById('fruitInput');
            let fruit = input.value;  
            fruitsSet.add(fruit); // Dodawanie owocu do Set

            displayFruits(); // Wyświetlanie listy owoców
            input.value = ''; // Czyszczenie pola tekstowego
        }

        function displayFruits() {
            let fruitsDiv = document.getElementById('fruits');
            fruitsDiv.innerHTML = ''; // Czyszczenie poprzedniej listy

            // Iteracja po wszystkich elementach Set i wyświetlanie ich
            fruitsSet.forEach(function(fruit) {
                fruitsDiv.innerHTML += fruit + '<br>';
            });
        }
    </script>
</body>
</html>

Usuwanie elementów i inne operacje na Set

Aby usunąć element z Set, używamy metody delete, a aby wyczyścić cały Set, używamy metody clear:

// Usuwanie elementu
mySet.delete("banana");

// Sprawdzanie, czy element istnieje w Set
console.log(mySet.has("apple")); // true

// Wyczyście całego Set
mySet.clear();

Podsumowanie

Set w JavaScript umożliwia łatwe przechowywanie unikalnych wartości. Jest to szczególnie przydatne, gdy potrzebujemy zapewnić, że żadne duplikaty nie zostaną dodane do naszej kolekcji. Dzięki prostym metodom takim jak add, delete, has, i clear, Set oferuje podstawowe, ale potężne narzędzia do zarządzania unikalnymi zbiorami danych. Użycie Set może znacznie ułatwić pracę z danymi w aplikacjach JavaScript, szczególnie gdy połączone z interfejsem użytkownika, pozwalając na dynamiczne i interaktywne zarządzanie danymi.

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