Modest Programmer logo
5 września 2018
Tagi: JavaScript
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.
Autor artykułu:
Kazimierz Szpin
Kazimierz Szpin
Programista. Specjalizuje się w C#, głównie WPF, Windows Forms oraz ASP.NET MVC.
Autor bloga ModestProgrammer.pl
Dodaj komentarz
© Copyright 2018 modestprogrammer.pl. Wszelkie prawa zastrzeżone Design by Kazimierz Szpin