JS for Loop Tutorial - Kako prevrtati niz u JavaScript-u

Ovaj će vam članak pružiti solidno razumijevanje kako točno ponoviti strukturu podataka Array u JavaScript-u.

Bez obzira jeste li tek počeli učiti JavaScript ili ste ovdje radi osvježavanja, za vas će biti korisno u svakom slučaju. Ovaj će vas članak provesti kroz jedan od najčešće korištenih JavaScript koncepata.

Što je niz?

let cars = ["Tesla", "Ferrari", "Lamborghini", "Audi"];

Iznad je JavaScript niz koji se koristi za pohranu više vrijednosti. Ovo je jedan od najjednostavnijih oblika niza. Sadrži 4 "elementa" unutar polja, svi nizovi. I kao što vidite, svaki je element odvojen zarezom.

Ovaj primjer smještaja sadrži različite marke automobila i na njega se može uputiti carsvarijabla.

Postoji niz načina na koje možemo itirirati preko ovog niza. JavaScript je nevjerojatno bogat značajkama, tako da imamo luksuz odabrati najbolji način za rješavanje našeg problema.

Evo kako ćemo riješiti ponavljanje nizova u JavaScript-u:

  1. Istaknite 5 uobičajenih metoda za ponavljanje niza
  2. Pokažite neke uvide u svaku iterativnu metodu
  3. Navedite i kod koji možete koristiti za testiranje!

Tradicionalno za petlju

Što je For Loop?

Wikipedia definira For Loop kao:

"U računalnoj znanosti, for-loop (ili jednostavno for loop ) je naredba kontrolnog tijeka za specificiranje iteracije, koja omogućuje ponavljanje izvršavanja koda ."

Petlja for način je ponovnog izvršavanja koda. Umjesto da upišete console.log(“hi”)pet puta, možete ga umotati u for petlju.

U ovom prvom primjeru naučit ćemo kako prelistavati niz automobila koji ste gore vidjeli i ispisati svaki element. Iterator, odnosno brojač, započet će s prvim indeksom "Tesla", a završiti s zadnjim "Audijem". Kreće se kroz niz i ispisuje jedan po jedan element.

let cars = ["Tesla", "Ferrari", "Lamborghini", "Audi"]; for(let i = 0; i < cars.length; i++) { console.log(cars[i]); }

Izlaz:

Tesla Ferrari Lamborghini Audi

Uronivši u kod, prosljeđujemo tri mogućnosti petlji for

  • varijabla iteratora - let i = 0;
  • gdje bi se iterator trebao zaustaviti - i < card.length
  • koliko povećati iterator svaku petlju - i++

Ova petlja nas započinje 0, povećava varijablu za jednu po jednu petlju i zaustavlja se kada pogodimo zadnji element u nizu.

Ključna prednost tradicionalne for petlje je ta što imate veću kontrolu.

Moguće je pristupiti različitim elementima unutar niza ili itirirati kroz niz na sofisticiran način da biste riješili složeni problem. Na primjer, preskakanje svakog drugog elementa u polju može se učiniti vrlo jednostavno pomoću tradicionalne for petlje.

Metoda forEach

Što je metoda forEach?

forEachMetoda se koristi za izvršavanje funkcije za svaki element niza. Ova je metoda izvrstan izbor ako je duljina niza "nepoznata" ili ako se zajamčeno mijenja. Ovu se metodu mogu koristiti samo s nizovima, setovima i kartama.

const amounts = [65, 44, 12, 4]; let doubledAmounts = []; amounts.forEach(item => { doubledAmounts.push(item * 2); }) console.log(doubledAmounts);

Najveća je korist forEachpetlje mogućnost pristupa svakoj stavci, čak i ako je vjerojatnost da će vaš niz narasti. To je skalabilno rješenje za mnoge slučajeve korištenja i lakše ga je čitati i razumjeti nego tradicionalno for loop, jer znamo da ćemo se svaki put itirirati preko svakog elementa.

Dok petlja

Što je while Loop?

Wikipedia definira While Loop kao:

Petlja while je naredba kontrolnog toka koja omogućuje ponavljanje izvršavanja koda na temelju zadanog logičkog uvjeta. A petlja se može shvatiti kao ponavljanje, ako izjavi. "

whilePetlja je način da se u više navrata izvršavanje koda za provjeru je li uvjet true ili false. Dakle, umjesto da koristimo for petlju, s ugniježđenom naredbom if, možemo koristiti while petlju. Ili, ako ne uspijemo pronaći duljinu niza, dok su petlje izvrstan izbor.

Petlju while često kontrolira brojač. U primjeru ispod prikazujemo osnovnu iteraciju petlje tijekom niza. Ključno je imati kontrolu nad while petljom koju stvarate.

Primjer petlje (dobro):

let i = 0 while (i < 5) { console.log(i); i++; }

Izlaz :

0 1 2 3 4

Petlja while je if izjava i < 5ili je izgovorena naglas "i manje od 5". Varijabla ise povećava svaki put kad se petlja pokrene.

Jednostavno rečeno, to znači da se varijabli dodaje 1 isvaki put kad petlja izvede potpunu iteraciju. Na prvoj je iteraciji ijednako 0, a na konzolu ispisujemo "0".

Najveći rizik korištenja while petlje je pisanje uvjeta koji nikada nije ispunjen.

To se često događa u scenarijima iz stvarnog svijeta, gdje netko napiše while petlju, ali zaboravi testirati svoju petlju, a ona uvodi beskonačnu petlju u bazu koda.

Beskonačna petlja događa se kada uvjet nikada nije zadovoljen i petlja nastavlja raditi vječno. To često rezultira lomljenjem promjena, što onda dovodi do prekida i prestanka rada cijele softverske aplikacije.

Upozorenje: Nemojte pokretati ovaj kod.

Primjer beskonačne petlje (loše):

let i = 0 while (i < 5) { console.log(i); }

Izlaz:

Rezultati se mogu razlikovati.

Petlja radi dok

Što je to while petlja?

Wikipedia definira petlju Do-While kao:

" Petlja do while je naredba kontrolnog toka koja izvršava blok koda barem jednom , a zatim opetovano izvršava blok ili ne, ovisno o zadanom logičkom stanju na kraju bloka."

Do-while petlja gotovo je identična while petlji, međutim postoji jedna ključna razlika. Do-while petlja jamčit će da će uvijek izvršiti blok koda barem jednom prije nego što se označi if.

Često o tome razmišljam kao o obrnutoj while petlji i gotovo ih nikad ne koristim. Međutim, dobro dođu u nekim vrlo specifičnim scenarijima.

Primjer ponavljanja (dobro):

let i = 0; do { console.log(i); i++; } while (i < 5);

Izlaz :

0 1 2 3 4

Najveći rizik korištenja petlje za pisanje je pisanje uvjeta koji nikada nije ispunjen. (Isto kao i kod while Loop.)

Upozorenje: Nemojte pokretati ovaj kod.

Primjer beskonačne petlje (loše):

let i = 0; do { console.log(i); } while (i < 5);

Izlaz :

Rezultati se mogu razlikovati.

Želite svoje znanje o JavaScriptu podići na sljedeću razinu? Saznajte o tome map, što je isto kao forEach, ali uz bonus !! ?

BONUS primjer (ponavljanje s mapom)

Što je karta?

Wikipedia definira kartu kao:

„U mnogim programskim jezicima map je naziv funkcije višeg reda koja primjenjuje zadanu funkciju na svaki element funktora, npr. Popis, vraćajući popis rezultata istim redoslijedom. Često se naziva primjenom na sve kada se razmatra u funkcionalnom obliku. "

How does it work? The map function in JavaScript applies a function to every element inside the array. Please take a moment to re-read that sentence.

Afterwards, the map function returns a new array with the results of applying a function to every element in the array.

Map example:

const array = [1, 1, 1, 1]; // pass a function to map const results = array.map(x => x * 2); console.log(results);

Output:

[2,2,2,2]

We have applied the map function to the array containing four 1's. The map function then multiplied each element by 2, i.e., x * 2, and returned a new array. The new array was then stored in the results variable.

By viewing our output, we can see this worked successfully. Every element in the array has been multiplied by 2. This method can be used as a replacement to a loop in some cases, and is incredibly powerful.

Conclusion

Well done! You have learned five different ways to iterate over an array in JavaScript. These are the fundamental building blocks that will set you up for success in your JavaScript programming journey.

You have also been exposed to an advanced concept, map, which is used often in large-scale software applications.

So, I’ll leave you with this: how are you going to use arrays in your projects? And which iteration method did you find most exciting?  

Thanks for reading!

If you liked my article, please follow me and/or send me a message!  

Twitter • Medium • Github