Chcesz poznać tajniki efektywnego iterowania w JavaScript? Pętle JavaScript to podstawowe narzędzia, które pozwalają na wielokrotne wykonywanie fragmentów kodu. W tym artykule omówimy różne rodzaje pętli, takie jak pętla for, while, do…while, a także nowoczesne metody iteracji, takie jak forEach
, map
, filter
i reduce
. Dowiesz się, jak unikać błędów w iteracjach, optymalizować kod oraz zarządzać pętlami w asynchronicznych funkcjach. # pętla for javascript
JavaScript – co to jest i jak zacząć naukę?
Dlaczego używamy pętli?
Pętla to konstrukcja programistyczna, która pozwala na wielokrotne wykonanie określonego bloku kodu, dopóki spełniony jest określony warunek. Dzięki pętlom możemy automatyzować powtarzające się zadania, co jest niezbędne w efektywnym programowaniu.
Dokumentacja pętli w JavaScript na MDN Web Docs
Pętla for w JavaScript
Składnia i działanie pętli for
Pętla for jest jedną z najczęściej używanych pętli w JavaScript. Jej składnia pozwala na precyzyjną kontrolę liczby iteracji.
Składnia:
for (inicjalizacja; warunek; iteracja) {
// kod wykonywany w każdej iteracji
}
Inicjalizacja – ustawienie początkowej wartości zmiennej sterującej.
Warunek – sprawdzamy warunek zakończenia pętli; jeśli jest
true
, pętla jest kontynuowana.Iteracja – zmiana wartości zmiennej sterującej po każdej iteracji.
Przykład pętli for:
for (let i = 0; i < 5; i++) {
console.log(`Iteracja ${i}`);
}
Wynik działania pętli:
Iteracja 0
Iteracja 1
Iteracja 2
Iteracja 3
Iteracja 4

Zastosowanie pętli for
Pętla for jest idealna, gdy wiemy, ile razy chcemy wykonać blok kodu. Możemy ją wykorzystać do iteracji po tablicach, generowania sekwencji liczb czy powtarzania określonych operacji.
Przykład użycia pętli for do iteracji po tablicy:
const liczby = [1, 2, 3, 4, 5];
for (let i = 0; i < liczby.length; i++) {
console.log(`Liczba: ${liczby[i]}`);
}
Pętla while
Działanie pętli while
Pętla while wykonuje blok kodu dopóki podany warunek jest prawdziwy.
Składnia pętli while:
while (warunek) {
// kod wykonywany w każdej iteracji
}
Przykład pętli while:
let licznik = 0;
while (licznik < 5) {
console.log(`Licznik: ${licznik}`);
licznik++;
}
Użycie pętli while
Omawiana pętla while jest przydatna, gdy nie wiemy dokładnie, ile razy pętla powinna się wykonać, ale wiemy, jaki warunek musi być spełniony.
Pętla do…while
Pętla do-while działa podobnie do pętli while, z tą różnicą, że kod wewnątrz pętli zostanie wykonany przynajmniej raz, niezależnie od warunku.
Składnia:
do {
// kod wykonywany w każdej iteracji
} while (warunek);
Przykład pętli do-while:
let licznik = 5;
do {
console.log(`Licznik: ${licznik}`);
licznik++;
} while (licznik < 5);
Wynik działania pętli:
Licznik: 5
Nowoczesne metody iteracji
Metoda forEach
Metoda forEach
pozwala na iterację po elementach tablicy.
Przykład:
const owoce = ["jabłko", "banan", "gruszka"];
owoce.forEach((owoc, index) => {
console.log(`Owoc nr ${index + 1}: ${owoc}`);
});
Metody map, filter, reduce
map – tworzy nową tablicę, w której każdy element jest wynikiem funkcji zastosowanej do elementu oryginalnej tablicy.
const liczby = [1, 2, 3]; const podwojone = liczby.map(liczba => liczba * 2); console.log(podwojone); // [2, 4, 6]
filter – tworzy nową tablicę z elementami, które spełniają określony warunek.
const liczby = [1, 2, 3, 4, 5]; const parzyste = liczby.filter(liczba => liczba % 2 === 0); console.log(parzyste); // [2, 4]
reduce – redukuje tablicę do jednej wartości, stosując funkcję akumulatora.
const liczby = [1, 2, 3, 4]; const suma = liczby.reduce((acc, liczba) => acc + liczba, 0); console.log(suma); // 10
Pętla for…in i for…of
Pętla for…in
Służy do iteracji po właściwościach obiektu.
Przykład:
const osoba = { imie: "Jan", wiek: 30 };
for (const klucz in osoba) {
console.log(`${klucz}: ${osoba[klucz]}`);
}
Pętla for…of
Służy do iteracji po iterowalnych obiektach, takich jak tablice czy stringi.
Przykład:
const liczby = [10, 20, 30];
for (const liczba of liczby) {
console.log(liczba);
}
Zagnieżdżanie pętli
Pętla w pętli pozwala na iterację po wielowymiarowych strukturach danych.
Przykład:
const tablica2D = [
[1, 2],
[3, 4],
[5, 6]
];
for (let i = 0; i < tablica2D.length; i++) {
for (let j = 0; j < tablica2D[i].length; j++) {
console.log(`Element [${i}][${j}] = ${tablica2D[i][j]}`);
}
}
Kontrola przepływu w pętlach
Instrukcja break
Przerywa działanie pętli.
Przykład:
for (let i = 0; i < 10; i++) {
if (i === 5) {
break;
}
console.log(i);
}
// Wyświetli liczby od 0 do 4
Instrukcja continue
Pomija bieżącą iterację i przechodzi do następnej.
Przykład:
for (let i = 0; i < 5; i++) {
if (i === 2) {
continue;
}
console.log(i);
}
// Wyświetli 0, 1, 3, 4
Unikanie błędów w pętlach
Nieskończone pętle
Należy upewnić się, że warunek zakończenia pętli zostanie spełniony. W przeciwnym razie pętla stanie się nieskończona, co może spowodować zawieszenie programu.
Przykład nieskończonej pętli:
let i = 0;
while (i >= 0) {
console.log(i);
i++; // Bez limitu, i ciągle rośnie
}
Ostrożność z pętlami asynchronicznymi
Gdy używamy pętli w funkcjach asynchronicznych, musimy pamiętać o odpowiednim zarządzaniu przepływem kodu, aby uniknąć nieoczekiwanych zachowań.
Optymalizacja pętli
Minimalizuj operacje wewnątrz pętli
Staraj się unikać wykonywania zbędnych operacji wewnątrz pętli, które mogą spowolnić działanie programu.
Przykład:
// Mniej efektywne
for (let i = 0; i < array.length; i++) {
// Kod
}
// Bardziej efektywne
const length = array.length;
for (let i = 0; i < length; i++) {
// Kod
}
Używaj odpowiednich metod iteracji
Czasami zamiast tradycyjnej pętli for, lepiej jest użyć metod takich jak forEach
czy map
, które są czytelniejsze i mogą być bardziej efektywne.
Pętle w asynchronicznych funkcjach
Gdy używasz pętli w funkcjach asynchronicznych, warto korzystać z pętli for...of
w połączeniu z async/await
.
Przykład:
async function przetworzDane(dane) {
for (const element of dane) {
await wykonajAsynchronicznie(element);
}
}
Asynchroniczne iteracje z async/await
Podsumowanie
Pętle JavaScript są niezbędne do efektywnego iterowania i manipulowania danymi. Znajomość różnych rodzajów pętli, takich jak pętla for, while, do…while, oraz nowoczesnych metod iteracji, pozwala na pisanie bardziej czytelnego i wydajnego kodu. Pamiętaj o optymalizacji pętli, unikaniu błędów oraz odpowiednim zarządzaniu pętlami w asynchronicznych funkcjach.
Zapraszamy do dalszej nauki i eksperymentowania z pętlami w JavaScript. Im lepiej zrozumiesz te konstrukcje, tym bardziej efektywnym programistą się staniesz!