Pętle w JavaScript – efektywne iterowanie

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!

Mateusz Wojdalski

Specjalista SEO i content marketingu w Devstock. Zajmuję się strategią treści, automatyzacją procesów marketingowych i wdrożeniami AI w codziennej pracy. Badam nowe narzędzia, adaptuję je do realnych zadań i piszę o tym, co faktycznie działa.