7.7 KiB

Raw Permalink Blame History

JavaScript Alapok: Tömbök és Ciklusok

Sketchnote készítette: Tomomi Imura

Előadás előtti kvíz

Ez a lecke a JavaScript alapjait tárgyalja, amely a weben az interaktivitást biztosítja. Ebben a leckében megtanulod a tömbök és ciklusok használatát, amelyek az adatok kezelésére szolgálnak.

🎥 Kattints a fenti képekre a tömbökről és ciklusokról szóló videókért.

Ezt a leckét elvégezheted a Microsoft Learn oldalán!

Tömbök

Az adatokkal való munka minden programozási nyelvben gyakori feladat, és sokkal egyszerűbb, ha az adatok strukturált formátumban, például tömbökben vannak tárolva. A tömbök segítségével az adatok egy listához hasonló struktúrában tárolhatók. A tömbök egyik nagy előnye, hogy különböző típusú adatokat is tárolhatunk egy tömbben.

✅ A tömbök mindenhol körülvesznek minket! Tudsz mondani egy valós példát egy tömbre, például egy napelem tömbre?

A tömb szintaxisa egy pár szögletes zárójel.

let myArray = [];

Ez egy üres tömb, de a tömbök már eleve adatokkal feltöltve is deklarálhatók. A tömbben lévő értékeket vesszővel választjuk el egymástól.

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

A tömb értékeihez egyedi érték, az úgynevezett index van hozzárendelve, amely egy egész szám, és a tömb elejétől való távolság alapján van meghatározva. A fenti példában a "Chocolate" sztring érték indexe 0, míg a "Rocky Road" indexe 4. Az indexet szögletes zárójelekkel használhatjuk az értékek lekérésére, módosítására vagy beszúrására.

✅ Meglep, hogy a tömbök indexe nullával kezdődik? Néhány programozási nyelvben az indexek 1-től kezdődnek. Ennek érdekes története van, amelyről itt olvashatsz a Wikipédián.

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

Az indexet felhasználhatjuk egy érték módosítására, például így:

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

És új értéket is beszúrhatunk egy adott indexre, például így:

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

✅ Gyakoribb módja az értékek hozzáadásának egy tömbhöz az olyan tömb operátorok használata, mint az array.push()

Ha meg szeretnéd tudni, hány elem van egy tömbben, használd a length tulajdonságot.

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

✅ Próbáld ki magad! Használd a böngésződ konzolját, hogy létrehozz és manipulálj egy saját tömböt.

Ciklusok

A ciklusok lehetővé teszik, hogy ismétlődő vagy iteratív feladatokat hajtsunk végre, és rengeteg időt és kódot takaríthatunk meg velük. Minden iteráció változhat a változókban, értékekben és feltételekben. A JavaScriptben különböző típusú ciklusok léteznek, amelyek mindegyike apró eltérésekkel ugyanazt a célt szolgálja: adatokat iterálni.

For ciklus

A for ciklusnak 3 részre van szüksége az iterációhoz:

counter Egy változó, amelyet általában egy számmal inicializálnak, és az iterációk számát számolja
condition Egy kifejezés, amely összehasonlító operátorokat használ, hogy a ciklus akkor álljon le, amikor false lesz
iteration-expression Minden iteráció végén fut, általában a számláló értékének megváltoztatására használják

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

✅ Futtasd ezt a kódot a böngésződ konzoljában. Mi történik, ha apró változtatásokat eszközölsz a számlálón, a feltételen vagy az iterációs kifejezésen? Tudsz visszafelé futtatni egy visszaszámlálást?

While ciklus

A for ciklus szintaxisától eltérően a while ciklusoknak csak egy feltételre van szükségük, amely leállítja a ciklust, amikor a feltétel false lesz. A ciklusok feltételei általában más értékekre, például számlálókra támaszkodnak, és ezeket a ciklus során kezelni kell. A számlálók kezdőértékeit a cikluson kívül kell létrehozni, és minden kifejezést, amely megfelel egy feltételnek, beleértve a számláló módosítását, a cikluson belül kell fenntartani.

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

✅ Miért választanál for ciklust a while ciklus helyett? 17 ezer nézőnek volt ugyanez a kérdése a StackOverflow-n, és néhány vélemény érdekes lehet számodra.

Ciklusok és Tömbök

A tömböket gyakran használják ciklusokkal, mert a legtöbb feltétel a tömb hosszát használja a ciklus leállításához, és az index lehet a számláló értéke is.

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

✅ Kísérletezz egy saját tömbbel, és iterálj rajta a böngésződ konzoljában.

🚀 Kihívás

A tömbök iterálására más módszerek is léteznek a for és while ciklusokon kívül. Ilyenek például a forEach, for-of, és map. Írd át a tömb iterációdat ezek egyikének használatával.

Előadás utáni kvíz

Áttekintés és Önálló Tanulás

A JavaScript tömbök számos hasznos metódust tartalmaznak az adatok manipulálására. Olvass ezekről a metódusokról, és próbálj ki néhányat (például push, pop, slice és splice) egy saját tömbön.

Feladat

Tömb iterálása

Felelősség kizárása:
Ez a dokumentum az AI fordítási szolgáltatás Co-op Translator segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Fontos információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.

7.7 KiB Raw Permalink Blame History