Pętle w dowolnym języku programowania to rzecz, bez której ani rusz. Można powiedzieć, że programista bez pętli jest jak żołnierz bez karabinu… albo uczeń bez jedynki.
W dzisiejszym poradniku chcielibyśmy pokazać wam podstawy działań na pętli. Ale nie będą to przykłady typu:
for (let i = 0; i < 5; i++) {
console.log(i);
}…Nauka programowania jest trochę jak nauka matematyki: widzi i rozwiązuje się przy tablicy proste przykłady, a potem nagle dostajemy od życia na głowę jakieś skomplikowane działania, przez które nie możemy przebrnąć.
Przejdźmy więc do pierwszego przykładu:
const obj = { miasto: 'Poznań', city: 'Województwo wielkopolskie' };
for (let key in obj) {
console.log(key + ': ' + obj[key]);
}Mamy tu zwykłą pętlę for. Iteruje się ona po każdym z elementów wypisując tylko console. log. Nic nam nie zwraca.
A jakbyśmy ją trochę „upiększyli”? Co może nam w ogóle robić taka pętla, do czego może nam służyć?
Np. do tego:
const wojewodztwa = [
'Województwo dolnośląskie',
'Województwo kujawsko-pomorskie',
'Województwo lubelskie',
'Województwo lubuskie',
'Województwo łódzkie',
'Województwo małopolskie',
'Województwo mazowieckie',
'Województwo opolskie',
'Województwo podkarpackie',
'Województwo podlaskie',
'Województwo pomorskie',
'Województwo śląskie',
'Województwo świętokrzyskie',
'Województwo warmińsko-mazurskie',
'Województwo wielkopolskie',
'Województwo zachodniopomorskie'
];
miasta = [
{miasto: 'Bydgoszcz', wojewodztwo: 'Województwo kujawsko-pomorskie'},
{miasto: 'Poznań', wojewodztwo: 'Województwo wielkopolskie'},
{miasto: 'Warszawa', wojewodztwo: 'Województwo mazowieckie'}
];
function stworzSpisMiastWWojewodztwach() {
const spis = []
for (let wojewodztwo of wojewodztwa) {
const object = {
wojewodztwo: wojewodztwo,
miasta: []
}
for (let miasto of miasta) {
if (miasto.wojewodztwo === wojewodztwo) {
console.log('pasuje', miasto.miasto)
object.miasta.push(miasto)
}
}
spis.push(object)
}
console.log('spis', spis)
}Ok, a tak właściwie co tu się dzieje? Krótko mówiąc, mamy tu pętlę w pętli. Najpierw patrzymy po kolei na wszystkie województwa i każdemu z nich się przyglądamy, a potem na warsztat bierzemy po kolei każde miasto w odniesieniu do województwa. Czy dane miasto leży w danym województwie? Jeśli tak — wepchniemy to miasto do specjalnego obiektu, który reprezentuje nam w spisie jedno województwo. Tak jak widzicie, mamy w tym obiekcie napisaną nazwę województwa i tablicę ze wszystkimi miastami.
Na koniec wszystkie takie województwa wypychamy, do jednej tablicy otrzymując pełny, ładny spis.
Uf.
Nie musicie tego ogarniać już teraz. Ale zauważcie, że w przypadku pętli for mamy jedno znaczące słówko, bez którego by się to nie odbyło:
Dokładnie. of pomaga nam się literować po konkretnej treści tego obiektu, a nie indeksie. Gdybyśmy napisali coś takiego:
for (let wojewodztwo in wojewodztwa) {
console.log(wojewodztwo);
}Otrzymalibyśmy wypisanie w konsoli numerów od 0 do 15, czyli wypisałoby nam indeksy poszczególnych elementów w tablicy.
A jeśli wypiszemy taki kod, jak jest powyżej otrzymamy wynik:
To, co właśnie zrobiliśmy, to pętla zagnieżdżona 🙂
