piątek, 2024-01-05

JS: Pętle w praktyce

Pętle w JavaScript są niezwykle przydatne w różnych scenariuszach programistycznych. W materiale przedstawiono różne sposoby rozwiązywania typowych problemów programistycznych z wykorzystaniem pętli.

Przetwarzanie elementów tablicy

Jednym z najczęstszych zastosowań pętli jest iteracja po elementach listy, takiej jak tablica, i wykonanie określonej akcji dla każdego z nich.

Przykład: Wyświetlanie wartości każdego elementu tablicy.

let liczby = [1, 2, 3, 4, 5];
for (let i = 0; i < liczby.length; i++) {
    console.log(liczby[i]);
}

Przykład: Wyświetlanie wartości podniesionej do kwadratu każdego elementu tablicy.

let liczby = [1, 2, 3, 4, 5];
for (let i = 0; i < liczby.length; i++) {
    console.log(liczby[i] * liczby[i]);
}

Wyszukiwanie elementu

Pętle mogą być używane do przeszukiwania tablicy lub innego rodzaju kolekcji w celu znalezienia elementu spełniającego określone kryteria.

Przykład: Znalezienie pierwszej liczby parzystej w tablicy.

let liczby = [3, 5, 7, 8, 10];
for (let i = 0; i < liczby.length; i++) {
    if (liczby[i] % 2 === 0) {
        console.log(liczby[i]);
        break; // przerywa pętlę po znalezieniu pierwszej liczby parzystej
    }
}

Akumulacja wartości

Pętle są często stosowane do akumulowania wartości, takich jak suma lub średnia z serii liczb.

Przykład: Obliczanie sumy elementów w tablicy.

let liczby = [1, 2, 3, 4, 5];
let suma = 0;
for (let i = 0; i < liczby.length; i++) {
    suma += liczby[i];
}
console.log(suma);

Przetwarzanie łańcuchów znaków

Pętle mogą być używane do przetwarzania ciągów znaków, na przykład do odwracania ciągu znaków lub sprawdzania palindromów.

Przykład: Odwracanie ciągu znaków.

let tekst = "JavaScript";
let odwroconyTekst = '';
for (let i = tekst.length - 1; i >= 0; i--) {
    odwroconyTekst += tekst[i];
}
console.log(odwroconyTekst);

Uwaga: Ten sam efekt można uzyskać w znacznie bardziej zwięzły sposób. Poniżej znajdziesz dwa przykłady.

let tekst = "JavaScript";

console.log(tekst.split('').reverse().join(''));
console.log([...tekst].reverse().join(''));

Generowanie HTML

Pętle mogą być używane do dynamicznego tworzenia elementów HTML na podstawie danych z JavaScript.

Przykład: Tworzenie listy HTML (ul) z elementów tablicy.

let elementy = ["HTML", "CSS", "JavaScript"];
let html = "<ul>";
for (let i = 0; i < elementy.length; i++) {
    html += `<li>${elementy[i]}</li>`;
}
html += "</ul>";
document.body.innerHTML = html;

Przetwarzanie danych strukturalnych

Pętle mogą być wykorzystywane do przetwarzania bardziej złożonych struktur danych, takich jak obiekty lub tablice obiektów.

Przykład: Wyświetlanie informacji z listy obiektów.

let osoby = [
    { imie: "Anna", wiek: 28 },
    { imie: "Jan", wiek: 35 }
];
for (let i = 0; i < osoby.length; i++) {
    console.log(`${osoby[i].imie} ma ${osoby[i].wiek} lat.`);
}