Pętle w JavaScript cz. 2

Wracamy do pętli w JavaScript. Wczoraj wprowadziłem Cię do tematu pętli, dzisiaj będę kontynuował ten temat. Przypomnę Ci, że w JavaScript mamy 5 różnych pętli, są to pętle for, while, do while, o których pisałem wczoraj oraz pętle for in oraz for of, które będę omawiał właśnie w tym artykule. Na koniec wspomnę, jeszcze o 2 istotnych słowach kluczowych, które czasem są używane z pętlami.

Pętle for, while oraz do while są to pętle, które możemy wykonywać określoną ilość razy, może to być nawet nieskończenie wiele razy. Pętle for in oraz for of, są pętlami nieco innymi. Dzięki nim możemy iterować po właściwościach obiektów oraz elementach tablicy.

Zacznę od pętli for in. Zadeklaruj obiekt course z właściwościami name oraz price:

let course = {
    name: 'JavaScript podstawy',
    price: 30
};

Aby wyświetlić właściwości (klucze), pętla for in powinna wyglądać w taki sposób:

for (let key in course)
    console.log(key);
//name
//price

Jak widzisz pętla iteruje po kolei po każdej właściwości zadeklarowanego obiektu. Oczywiście równie dobrze, w podobny sposób możemy wyświetlić wartości iterowanych właściwości:

for (let key in course)
    console.log(course[key]);
//JavaScript podstawy
//30

Kompletna pętla wyświetlająca wszystkie informacje powinna wyglądać w ten sposób:

for (let key in course)
    console.log('Klucz: ' + key + ', ' + 'Wartość: ' + course[key]);
//Klucz: name, Wartość: JavaScript podstawy 
//Klucz: price, Wartość: 30

Tej samej pętli możesz użyć do iterowania po elementach tablicy:

let courses = ['JavaScript', 'C#', '.NET'];
for (let index in courses)
    console.log('Index: ' + index + ',' + ' Wartość: ' + courses[index]);

W wersji 6 EcmaScript wprowadzono również nową pętle, dzięki której iterowanie po tablicach jest jeszcze łatwiejsze, mowa o pętli for of, zobacz przykład zastosowanie tej pętli:

let courses = ['JavaScript', 'C#', '.NET'];
for (let course of courses)
    console.log(course);
//JavaScript
//C#
//.NET

Pętli for in, najlepiej używać do iteracji po właściwościach obiektu, a pętla for of wygodniejsza jest do iterowania po elementach tablicy.

Z tematem pętli powiązane są 2 nowe słowa kluczowe: break i continue. Korzystając z pętli, możesz mieć potrzebę skorzystania z któregoś z tych słów kluczowych, dlatego opiszę Ci je w kilku zdaniach. Najlepiej będzie to zobrazować na przykładzie prostej pętli. Na początek wypiszę standardową pętlą liczby id 1 do 6.

for (let x = 1; x <=6; x++) {
    console.log('iteracja: ' + x);
}
//iteracja: 1
//iteracja: 2
//iteracja: 3
//iteracja: 4
//iteracja: 5
//iteracja: 6

Załóżmy, że użyjemy tej samej pętli, ale tym razem chcemy zakończyć pętle gdy x będzie równe 2. Użyjemy do tego słowa kluczowego break:

for (let x = 1; x <=6; x++) {

    if (x === 2)
        break;

    console.log('iteracja: ' + x);
}
//iteracja: 1

Co tutaj się stało? Pętla wykonywała się tak jak zawsze, ale w drugiej iteracji, gdy x było równe 2, napotkało na swojej ścieżce słowo break. Słowo break spowodowało natychmiastowe zakończenie działania pętli.

Zobaczmy na ten sam przykład, tylko użyjmy tym razem słowa continue zamiast break:

for (let x = 1; x <=6; x++) {

    if (x === 2)
        continue;

    console.log('iteracja: ' + x);
}
//iteracja: 1
//iteracja: 3
//iteracja: 4
//iteracja: 5
//iteracja: 6

Czy wiesz co tutaj się stało? Słowo kluczowe continue, w przeciwieństie do break spowodowało zakończenie tylko pojedyńczej iteracji, a następnie powrócenie do kolejnych iteracji. Na tym polega różnica w używaniu tych 2 słów kluczowych. Jeżeli chcesz, aby Twoja pętla zakończyła się w pewnym momencie użyj do tego break'a. Jeżeli potrzebujesz, przeskoczyć pojedyńczą iterację i następnie wrócić do wykonywania całej pętli użyj do tego continue. Na koniec dodam, że continue jest rzadko używane, niemniej jednak warto wiedzieć, że coś takiego istnieje, nie tylko w JavaScript, ale również w innych językach programowania.

To wszystko co chciałem Ci przekazać w tym artykule. Zapraszam Cię do kolejnych artykułów z serii podstaw programowania w języku JavaScript.

Poprzedni artykuł - Pętle w JavaScript cz. 1.
Następny artykuł - Tworzenie obiektów w JavaScript.

Blog Dla Młodszych Programistów C#/.NET

Dodaj komentarz

Wyszukiwarka

Tagi

Najnowsze artykuły

Losowe artykuły