Advertisement
  1. Code
  2. JavaScript

Naucz się programować w języku JavaScript: Część 3, Pętle

Scroll to top
Read Time: 5 min
This post is part of a series called Learn Computer Science with JavaScript.
Learn to Code With JavaScript: Part 4, Functions

Polish (Polski) translation by Tomasz Pierzchała (you can also view the original English article)

Wprowadzenie

Przypuśćmy, że dostałeś zadanie polegające na napisaniu programu wyświetlającego liczby 1-100. Jednym ze sposobów jest napisanie 100 wyrażeń console.log. Jednak jestem pewna, że nie zrobiłbyś tego - zmęczyłbyś się po 9. lub 10. linii.

Jedyną częścią, jaka się zmienia w każdym wyrażeniu jest liczba, więc powinna być możliwość, by zrobić to przy użyciu tylko jednego wyrażenia. Do tego właśnie służą pętle. Pętle pozwalają nam wykonywać zbiór kroków z bloku kodu wielokrotnie.

Treść

  • Pętle while
  • Pętle do-while
  • Pętle for
  • Tablice
  • Pętle for-in
  • Pętle for-of
  • Podsumowanie
  • Bibliografia

Pętle while

Pętle while będą wykonywać zbiór wyrażeń wielokrotnie, dopóki pewien warunek jest prawdziwy. Kiedy warunek jest fałszywy, program opuści pętlę. Pętla tego rodzaju sprawdza warunek przed wykonaniem iteracji. Iteracja jest wykonaniem ciała pętli. Poniższy przykład nie wyświetli niczego, ponieważ nasz warunek jest fałszywy.

1
let hungry = false;
2
3
while (hungry) {
4
    console.log("eat");
5
}

Ogólny zarys pętli while wygląda następująco:

1
while (condition) {
2
    statement;
3
    statement;
4
    etc.
5
}

Trzeba uważać używając pętli while na tworzenie pętli, które się nigdy nie skończą. Do takiej sytuacji dochodzi, gdy warunek nigdy staje się fałszywy. Jeśli ci się to zdarzy, program się zawiesi. Przykład:

1
let hungry = true;
2
3
while (hungry) {
4
    console.log("eat");
5
}

Zadanie

Ile razy wykona się ciało tej pętli:

1
let i = 0;
2
3
while (i < 10) {
4
    console.log("Hello, World");
5
    i += 1;
6
}

Pętle do-while

Pętla do-while wykona zbiór wyrażeń i dopiero sprawdzi warunek. Tego rodzaju pętla jest przydatna, gdy chcesz wykonać kod co najmniej raz. Poniższy przykład wyświetli "eat" jednokrotnie, nawet jeśli warunek będzie fałszywy,

1
let hungry = false;
2
3
do {
4
    console.log("eat");
5
} while (hungry);

Ogólny zarys pętli do-while wygląda następująco:

1
do {
2
    statement;
3
    statement;
4
    etc.
5
} while (condition);

Zadanie

Napisz pętlę do-while, która wyświetli liczby 1-10.

Pętle for

Pętla for powtórnie wykona blok kodu określoną ilość razy. Poniższy przykład wyświetli liczby 1-10:

1
for (let i = 1; i <= 10; i++) {
2
    console.log(i);
3
}

Ogólny zarys pętli for wygląda następująco:

1
for (initial; condition; step) {
2
    statement;
3
    statement;
4
    etc.
5
}

Initial to wyrażenie, które ustawia wartość naszej zmiennej. Condition to wyrażenie, które musi być prawdziwe, by wykonał się nasz blok kodu. Step to wyrażenie, które zwiększa wartość naszej zmiennej.

Jednym z wzorców w programowaniu jest użycie pętli for do modyfikacji wartości zmiennej przy użyciu jej samej i innej wartości. Ten przykład dodaje liczby 1-10:

1
let x = 0;
2
3
for (let i = 1; i <= 10; i++) {
4
    x += i;
5
}
6
7
console.log(x)    //55

+= jest operatorem przypisania, który dodaje wartość do zmiennej, na którą działa. Spójrzmy na listę wszystkich operatorów przypisania:

Operator
Przykład
Odpowiednik
+= x += 2
x = x + 2
-= x -= 2
x = x - 2
*= x *= 2
x = x * 2
/= x /= 2
x = x / 2
%= x %= 2
x = x % 2

Zadanie

Napisz pętlę for, która oblicza silnię danej liczby. Silnia liczby n jest iloczynem wszystkich liczb całkowitych od 1 do n. Np. 4! (4 silnia) to 1 x 2 x 3 x 4, równe 24.

Tablice

Tablica jest obiektem przechowującym zbiór rzeczy, zwanych elementami, do których mamy dostęp dzięki ich indeksowi. Indeks jest pozycją elementu wewnątrz tablicy. Pierwszy element ma indeks równy 0. Poniżej przedstawię część z najpopularniejszych operacji wykonywanych na tablicach.

Tworzenie pustej tablicy:

1
let arr = [ ];

Inicjacja tablicy z wartościami:

1
let arr = [1, 2, "Hello", "World"];

Dostęp do elementu z tablicy:

1
let arr = [1, 2, "Hello", "World"];
2
arr[0]   //1

3
arr[2]  //"Hello"

4

Nadpisanie elementu w tablicy:

1
let arr = [1, 2, "Hello", "World"];
2
arr[2] = 3;    //[1, 2, 3, "World"]

Przejście pętlą przez tablicę:

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

Dwuwymiarowa tablica jest tablicą, której elementami są tablice. Przykład:

1
let arr = [
2
    [1, 2],
3
    ["Hello", "World"]
4
];
5
6
console.log(arr[ 0 ][ 1 ]);    //2

Przejście pętlą przez tablicę i wyświetlenie każdego elementu wyglądałoby następująco:

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

Zadanie

Który element jest wyświetlony, gdy i = 1 i j = 0 w powyższej pętli for?

Pętla For-In

Pętla tego rodzaju pozwala nam na przejście przez klucze obiektu. Obiekt to stryktura danych, która ma klucze mapowane do wartości. Oto niektóre z najczęstszych operacji jakie można wykonać na obiekcie.

Tworzenie pustego obiektu:

1
let obj = { };

Inicjacja obiektu z wartościami:

1
let obj = {
2
    foo: "Hello",
3
    bar: "World"
4
};

Dostęp do właściwości obiektu:

1
let obj = {
2
    foo: "Hello",
3
    bar: "World"
4
};
5
6
obj.foo;     //"Hello"

7
obj["foo"];  //"Hello"

Modyfikacja właściwości w obiekcie:

1
let obj = {
2
    foo: "Hello",
3
    bar: "World"
4
};
5
6
obj.foo    = "hi"  
7
obj["foo"] = "hi"

Przejdź pętlą przez klucze obiektu:

1
for (let key in obj) {
2
    console.log(key);
3
}

Zadanie

Co wyświetli powyższa pętla for, przyjmując, że obj = {foo: "Hello", bar: "World"}?

Pętla for-of

Pętla tego rodzaju pozwala nam przechodzić przez wartości obiektów iterowalnych. Przykładami obiektów iterowalnych są tablice i łańcuchy znaków.

Przejdź pętlą przez tablicę:

1
let arr = ["foo", "bar", "baz"];
2
3
for (let elem of arr) {
4
    console.log(elem);
5
}
6
7
// foo bar baz

Przejdź pętlą przez łańcuch znaków:

1
let str = "Hello";
2
3
for (let char of str) {
4
    console.log(char);
5
}
6
7
//'H' 'e' 'l' 'l' 'o'

Zadanie

Używając dowolnej pętli, napisz program, który wyświetli taki wzór:

1
#
2
  #
3
    #
4
      #
5
        #

Podsumowanie

Pętle pozwalają nam zredukować ilość powtórzeń w kodzie. Pętle while dają możliwość powtarzania akcji do momentu, gdy warunek jest fałszywy, a do-while wykonują się co najmniej raz. Pętle for pozwalają nam powtarzać akcję dopóki nie osiągniemy końcowej wartości. Pętla for-in została zaprojektowana tak, byśmy mieli dostęp do kluczy obiektu. Pętla for-of została zaprojektowana tak, że mamy dostęp do wartości iterowalnego obiektu.

W następnej części 4. będziemy się uczyć o funkcjach.

Bibliografia

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.