Pętla for of w JavaScript

Pętla for...of w JavaScript to potężne narzędzie do iteracji po iterowalnych obiektach, takich jak tablice, stringi, Mapy, Sety i wiele innych. Pozwala na łatwe i czytelne przeglądanie elementów kolekcji bez potrzeby korzystania z indeksów lub specjalnych metod. W tej lekcji przyjrzymy się różnym zastosowaniom pętli for...of, ilustrując jej użycie na prostych przykładach.

Przykład użycia for of z tablicą

<!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...of w JavaScript</title>
</head>
<body>
    <h3>Przykład iteracji po tablicy</h3>
    <script>
        // Definicja tablicy z kilkoma elementami
        const fruits = ['Apple', 'Banana', 'Cherry'];

        // Użycie pętli for...of do iteracji po tablicy i wyświetlenie każdego elementu
        for (const fruit of fruits) {
            console.log(fruit); // Wyświetla nazwę każdego owocu
        }
    </script>
</body>
</html>

Przykład użycia for...of ze stringiem

<script>
    // Definicja stringa
    const greeting = "Hello, World!";

    // Użycie pętli for...of do iteracji po stringu i wyświetlenie każdego znaku
    for (const char of greeting) {
        console.log(char); // Wyświetla każdy znak z osobna
    }
</script>

Przykład użycia for...of z Mapą

<script>
    // Definicja Mapy zawierającej pary klucz-wartość
    const bookPrices = new Map([
        ['Book1', 29.99],
        ['Book2', 19.99],
        ['Book3', 49.99]
    ]);

    // Użycie pętli for...of do iteracji po Mapie i wyświetlenie każdej pary klucz-wartość
    for (const [book, price] of bookPrices) {
        console.log(`${book}: $${price}`); // Wyświetla nazwę i cenę każdej książki
    }
</script>

Podsumowanie

Pętla for...of oferuje prostą i elegancką składnię do iteracji po różnych typach kolekcji w JavaScript. Umożliwia wygodne przeglądanie elementów tablic, znaków w stringach, par klucz-wartość w Mapach i elementów w Setach, co czyni ją nieocenionym narzędziem w arsenale każdego programisty JavaScript. Dzięki jej użyciu, kod staje się bardziej zwięzły, czytelny i łatwiejszy do utrzymania.

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