Pętla for in

Pętla for...in w JavaScript jest potężnym narzędziem służącym do iteracji po wszystkich wyliczalnych właściwościach obiektów, włączając w to te dziedziczone za pośrednictwem łańcucha prototypów. Ta pętla jest szczególnie przydatna, gdy chcemy wykonać operacje na każdym elemencie obiektu, takim jak wyświetlenie lub modyfikacja wartości właściwości. W tej lekcji przedstawimy podstawowe użycie pętli for...in oraz pokażemy, jak może być ona wykorzystywana w różnych kontekstach.

Przykład: Iteracja przez właściwości obiektu

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pętla for...in w JavaScript</title>
</head>
<body>
    <h3>Wyniki iteracji przez obiekt:</h3>
    <div id="results"></div>

    <script>
        // Obiekt opisujący samochód
        const car = {
            brand: "Ford",
            model: "Mustang",
            year: 1969
        };

        // Referencja do elementu DIV, w którym wyświetlimy wyniki
        const resultsDiv = document.getElementById('results');

        // Iteracja przez wszystkie właściwości obiektu car
        for (const property in car) {
            // Tworzenie nowego elementu p (paragrafu) dla każdej właściwości
            const p = document.createElement('p');
            // Wstawienie tekstu zawierającego klucz i wartość właściwości
            p.textContent = `${property}: ${car[property]}`;
            // Dodanie elementu p do DIV wynikowego
            resultsDiv.appendChild(p);
        }
    </script>
</body>
</html>

W tym przykładzie, for...in przechodzi przez każdą właściwość w obiekcie car i dla każdej z nich tworzy nowy element <p>, który następnie dodawany jest do elementu <div> w HTML. W ten sposób możemy dynamicznie wyświetlać wszystkie informacje zawarte w obiekcie.

Uwagi dotyczące użycia

Pętla for...in jest niezwykle elastyczna, ale należy używać jej ostrożnie, ponieważ iteruje również po właściwościach dziedziczonych, co czasami może prowadzić do nieoczekiwanych wyników. Aby iterować tylko po własnych właściwościach obiektu, można użyć Object.hasOwnProperty() wewnątrz pętli:

for (const property in car) {
    if (car.hasOwnProperty(property)) {
        // Twój kod
    }
}

Podsumowanie

Pętla for...in w JavaScript jest użytecznym narzędziem do iteracji po właściwościach obiektów. Pozwala na elastyczne przeglądanie obiektów i wykonanie określonych operacji na każdej z ich właściwości. Jednak przy jej użyciu należy zachować ostrożność, aby uniknąć iteracji po niepożądanych właściwościach dziedziczonych.

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

Poprzedni
Następny
Scroll to Top