() translation by (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
