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.