Web-Dev-For-Beginners/translations/hr/2-js-basics/4-arrays-loops

Osnove JavaScripta: Nizovi i Petlje

Sketchnote autorice Tomomi Imura

Kviz prije predavanja

Kviz prije predavanja

Ova lekcija pokriva osnove JavaScripta, jezika koji omogućuje interaktivnost na webu. U ovoj lekciji naučit ćete o nizovima i petljama, koji se koriste za manipulaciju podacima.

🎥 Kliknite na slike iznad za videozapise o nizovima i petljama.

Ovu lekciju možete pronaći na Microsoft Learn!

Nizovi

Rad s podacima čest je zadatak u bilo kojem jeziku, a taj zadatak postaje puno lakši kada su podaci organizirani u strukturalnom formatu, poput nizova. Uz nizove, podaci se pohranjuju u strukturi sličnoj popisu. Jedna od glavnih prednosti nizova je ta što možete pohraniti različite vrste podataka u jednom nizu.

✅ Nizovi su svuda oko nas! Možete li smisliti primjer niza iz stvarnog života, poput niza solarnih panela?

Sintaksa za niz je par uglatih zagrada.

let myArray = [];

Ovo je prazan niz, ali nizovi se mogu deklarirati već popunjeni podacima. Višestruke vrijednosti u nizu odvajaju se zarezom.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

Vrijednostima u nizu dodjeljuje se jedinstvena vrijednost nazvana indeks, cijeli broj koji se dodjeljuje na temelju udaljenosti od početka niza. U gornjem primjeru, string vrijednost "Chocolate" ima indeks 0, a indeks "Rocky Road" je 4. Koristite indeks s uglatim zagradama za dohvaćanje, promjenu ili umetanje vrijednosti niza.

✅ Iznenađuje li vas što nizovi počinju s indeksom nula? U nekim programskim jezicima indeksi počinju od 1. Postoji zanimljiva povijest o tome, koju možete pročitati na Wikipediji.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors[2]; //"Vanilla"

Indeks možete iskoristiti za promjenu vrijednosti, ovako:

iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"

A novu vrijednost možete umetnuti na određeni indeks ovako:

iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"

✅ Češći način dodavanja vrijednosti u niz je korištenje operatora poput array.push()

Da biste saznali koliko stavki ima u nizu, koristite svojstvo length.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors.length; //5

✅ Isprobajte sami! Koristite konzolu svog preglednika za stvaranje i manipulaciju nizom po vlastitom izboru.

Petlje

Petlje nam omogućuju izvođenje ponavljajućih ili iterativnih zadataka i mogu uštedjeti puno vremena i koda. Svaka iteracija može se razlikovati u svojim varijablama, vrijednostima i uvjetima. Postoje različite vrste petlji u JavaScriptu, a sve imaju male razlike, ali u suštini rade isto: prolaze kroz podatke.

For petlja

for petlja zahtijeva 3 dijela za iteraciju:

• counter Varijabla koja se obično inicijalizira brojem koji broji broj iteracija
• condition Izraz koji koristi operatore usporedbe kako bi zaustavio petlju kada postane false
• iteration-expression Izvršava se na kraju svake iteracije, obično se koristi za promjenu vrijednosti brojača

// Counting up to 10
for (let i = 0; i < 10; i++) {
  console.log(i);
}

✅ Pokrenite ovaj kod u konzoli preglednika. Što se događa kada napravite male promjene u brojaču, uvjetu ili izrazu iteracije? Možete li učiniti da radi unatrag, stvarajući odbrojavanje?

While petlja

Za razliku od sintakse for petlje, while petlje zahtijevaju samo uvjet koji će zaustaviti petlju kada uvjet postane false. Uvjeti u petljama obično ovise o drugim vrijednostima poput brojača i moraju se upravljati tijekom petlje. Početne vrijednosti za brojače moraju se stvoriti izvan petlje, a svi izrazi za ispunjavanje uvjeta, uključujući promjenu brojača, moraju se održavati unutar petlje.

//Counting up to 10
let i = 0;
while (i < 10) {
 console.log(i);
 i++;
}

✅ Zašto biste odabrali for petlju umjesto while petlje? 17 tisuća korisnika imalo je isto pitanje na StackOverflowu, a neka od mišljenja mogla bi vam biti zanimljiva.

Petlje i nizovi

Nizovi se često koriste s petljama jer većina uvjeta zahtijeva duljinu niza za zaustavljanje petlje, a indeks također može biti vrijednost brojača.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(iceCreamFlavors[i]);
} //Ends when all flavors are printed

✅ Eksperimentirajte s prolaskom kroz niz po vlastitom izboru u konzoli preglednika.

---

🚀 Izazov

Postoje i drugi načini prolaska kroz nizove osim for i while petlji. Postoje forEach, for-of i map. Prepišite svoju petlju kroz niz koristeći jednu od ovih tehnika.

Kviz nakon predavanja

Kviz nakon predavanja

Pregled i samostalno učenje

Nizovi u JavaScriptu imaju mnogo metoda koje su izuzetno korisne za manipulaciju podacima. Pročitajte o tim metodama i isprobajte neke od njih (poput push, pop, slice i splice) na nizu po vlastitom izboru.

Zadatak

Prođite kroz niz

---

Odricanje od odgovornosti:
Ovaj dokument je preveden pomoću AI usluge za prevođenje Co-op Translator. Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja mogu proizaći iz korištenja ovog prijevoda.