JS hurok oktatóanyag - Hogyan kell iterálni egy tömböt a JavaScript-ben

Ez a cikk alapos megismerést nyújt arról, hogy pontosan hogyan kell iterálni egy tömb adatstruktúrán a JavaScript-ben.

Akár most kezdi el elsajátítani a JavaScript-et, akár egy frissítés céljából érkezik, mindkét oldalra lesz értéke. Ez a cikk bemutatja az egyik legszélesebb körben használt JavaScript-fogalmat.

Mi az a tömb?

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

A fenti JavaScript-tömb több érték tárolására szolgál. Ez egy tömb egyik legegyszerűbb formája. A tömbben 4 „elemet” tartalmaz, az összes karakterláncot. És amint láthatja, minden elemet vessző választ el.

Ez a példa tömb különböző márkájú autókat tartalmaz, és a carsváltozóval hivatkozhatunk rá.

Számos módon tudjuk iterálni ezt a tömböt. A JavaScript hihetetlenül funkciókban gazdag, ezért luxusunk van választani a legjobb megoldást problémánk megoldására.

Így kezeljük a tömbök iterációját a JavaScript-ben:

Jelöljön ki 5 gyakori módszert egy tömbön történő iterációra
Mutasson bepillantást az egyes iteratív módszerekbe
Adjon meg néhány kódot, amellyel kipróbálhatja azt is!

Hagyományos hurokhoz

Mi a For Loop?

A Wikipedia a For Loop-ot a következőképpen határozza meg:

"A számítástechnikában a for-loop (vagy egyszerűen a loop számára ) egy vezérlési folyamat utasítás az iteráció megadásához, amely lehetővé teszi a kód ismételt végrehajtását ."

Az A for ciklus a kód ismételt végrehajtásának módja. console.log(“hi”)Ötször gépelés helyett becsomagolhatja egy for ciklusba.

Ebben az első példában megtanuljuk, hogyan kell iterálni a fent látott autósáv felett, és kinyomtatni minden elemét. Az iterátor vagy számláló az első „Tesla” indexnél kezdődik és az utolsó „Audi” -nál fejeződik be. Áthalad a tömbön és egy-egy elemet nyomtat.

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

Kimenet:

Tesla Ferrari Lamborghini Audi

A kódba merülve három lehetőséget adunk át a for ciklusnak

az iterátor változó - let i = 0;
ahol az iterátornak le kell állnia - i < card.length
mennyi az egyes ciklusok iterátorának növelése - i++

Ez a hurok elindít minket 0, megnöveli a változót egy hurkonként, és leáll, amikor eltaláljuk a tömb utolsó elemét.

A hagyományos ciklus fő előnye, hogy nagyobb az irányítása.

Lehetséges a tömb különböző elemeihez való hozzáférés, vagy a tömbön keresztül történő kifinomult iteráció egy összetett probléma megoldása érdekében. Például a tömb minden más elemének átugrása meglehetősen egyszerűen elvégezhető a hagyományos for loop segítségével.

A forEach módszer

Mi a forEach módszer?

A forEachmetódust egy függvény végrehajtására használják a tömb minden eleméhez. Ez a módszer nagyszerű választás, ha a tömb hossza „ismeretlen”, vagy garantáltan változik. Ez a módszer csak tömbökkel, halmazokkal és térképekkel használható.

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

A forEachciklus legnagyobb előnye, hogy hozzáférhet az egyes elemekhez, még akkor is, ha a tömbje valószínűleg növekszik. Számos felhasználási esetre skálázható megoldás, és könnyebben olvasható és érthetőbb, mint a ciklusnál hagyományos, mert tudjuk, hogy minden elemet pontosan egyszer fogunk ismételni.

Miközben hurok

Mi a while hurok?

A Wikipédia meghatározza a While Loop-ot:

„A while ciklus egy vezérlési folyamat utasítás, amely lehetővé teszi a kód ismételt végrehajtását egy adott logikai feltétel alapján. A while ciklus felfogható ismétlődő if utasításként. ”

A whileciklus a kód ismételt végrehajtásának módja annak ellenőrzésére, hogy egy feltétel igaz vagy hamis. Tehát a for ciklus használata helyett beágyazott if utasítással használhatunk egy while ciklust. Vagy ha nem találjuk meg a tömb hosszát, akkor a hurkok kiváló választás.

A while ciklust gyakran számláló vezérli. Az alábbi példában egy tömbön keresztüli iterációt mutatunk be. A legfontosabb, hogy a létrehozott while ciklus felett rendelkezzen irányítással.

Míg a hurok példa (jó):

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

Kimenet :

0 1 2 3 4

The while loop's if statement is i < 5, or spoken aloud, "i is less than 5". The variable i is incremented every time the loop runs.

In simple terms, this means that 1 is added to the variable i every time the loop performs a full iteration. On the first iteration, i is equal to 0, and we print “0” to the console.

The greatest risk of using a while loop is writing a condition which is never met.

This occurs frequently in real-world scenarios, where someone writes a while loop but forgets to test their loop, and it introduces an infinite loop into the code-base.

An infinite loop occurs when the condition is never met, and the loop keeps running forever. This often results in breaking changes, which then causes the entire software application to break and stop working.

Figyelem: Ne futtassa ezt a kódot.

Végtelen hurok példa (rossz):

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

Kimenet:

Az eredmények változhatnak.

A Tedd hurok alatt

Mi a do while loop?

A Wikipedia a Do-while ciklust a következőképpen határozza meg:

"A do while ciklus olyan vezérlési folyamat utasítás, amely legalább egyszer végrehajt egy kódblokkot , majd a blokkot a blokk végén lévő adott logikai feltételektől függően többször is végrehajtja, vagy sem."

A do-while ciklus majdnem megegyezik a while ciklussal, azonban van egy kulcsfontosságú különbség. A do-while ciklus garantálja, hogy az if utasítás ellenőrzése előtt legalább egyszer végrehajtja a kódblokkot.

Gyakran úgy gondolom, hogy ez fordított ciklus, és szinte soha nem használja őket. Ezek azonban nagyon jól jönnek néhány nagyon speciális forgatókönyvben.

Do-Loop példa (jó):

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

Kimenet :

0 1 2 3 4

A do-loop használatának legnagyobb kockázata egy olyan feltétel megírása, amely soha nem teljesül. (Ugyanaz, mint a While Loop esetén.)

Figyelem: Ne futtassa ezt a kódot.

Végtelen hurok példa (rossz):

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

Kimenet :

Az eredmények változhatnak.

Szeretné a JavaScript-ismereteit magasabb szintre emelni? Tudjon meg többet map, ami megegyezik forEach, de bónuszsal !! ?

BÓNUSZ példa (iteráció térképpel)

Mi a térkép?

A Wikipedia a térképet a következőképpen határozza meg:

„Számos programozási nyelvben a map egy magasabb rendű függvény neve, amely egy adott függvényt alkalmaz egy funktor minden elemére, például egy listára, amely ugyanabban a sorrendben adja vissza az eredmények listáját. Funkcionális formában tekintve gyakran alkalmazzák mindenkire . ”

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