7.7 KiB
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 mutatja be, 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 megtekintĂ©sĂ©hez.
Ezt a leckét elérheted a Microsoft Learn oldalon!
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 hozzĂĄadĂĄ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 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"
Ăj Ă©rtĂ©ket is hozzĂĄadhatunk egy adott indexhez, 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: adatokon valĂł iterĂĄlĂĄst.
For ciklus
A for
ciklusnak 3 része van az iteråcióhoz:
szĂĄmlĂĄlĂł
Egy våltozó, amelyet åltalåban egy szåmmal inicializålnak, és az iteråciók szåmåt szåmoljafeltétel
Olyan kifejezĂ©s, amely összehasonlĂtĂł operĂĄtorokat hasznĂĄl, Ă©s akkor ĂĄllĂtja le a ciklust, amikorfalse
iteråciós kifejezés
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 vĂ©gzel a szĂĄmlĂĄlĂłn, feltĂ©telen vagy iterĂĄciĂłs kifejezĂ©sen? Tudsz visszafelĂ© futtatni egy visszaszĂĄmlĂĄlĂĄst?
While ciklus
A for
ciklus szintaxisåval ellentétben 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Ă©keken, pĂ©ldĂĄul szĂĄmlĂĄlĂłkon alapulnak, Ă©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 olyan kifejezĂ©st, amely megfelel a 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 igĂ©nyli 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ön valĂł iterĂĄlĂĄsnak vannak mĂĄs mĂłdjai is, mint a for Ă©s while ciklusok. Ilyenek pĂ©ldĂĄul a forEach, for-of, Ă©s map. Ărd ĂĄt a tömböd ciklusĂĄt ezek egyikĂ©nek hasznĂĄlatĂĄval.
ElĆadĂĄs utĂĄni kvĂz
ĂttekintĂ©s Ă©s önĂĄllĂł tanulĂĄs
A JavaScript tömbjeihez szĂĄmos mĂłdszer kapcsolĂłdik, amelyek rendkĂvĂŒl hasznosak az adatok manipulĂĄlĂĄsĂĄban. Olvass ezekrĆl a mĂłdszerekrĆl, Ă©s prĂłbĂĄlj ki nĂ©hĂĄnyat (pĂ©ldĂĄul push, pop, slice Ă©s splice) egy sajĂĄt tömbön.
Feladat
FelelĆssĂ©gkizĂĄrĂĄs:
Ez a dokumentum az Co-op Translator AI fordĂtĂĄsi szolgĂĄltatĂĄs segĂtsĂ©gĂ©vel kĂ©szĂŒlt. 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. Kritikus informĂĄciĂłk esetĂ©n javasolt a professzionĂĄlis, emberi fordĂtĂĄs igĂ©nybevĂ©tele. Nem vĂĄllalunk felelĆssĂ©get a fordĂtĂĄs hasznĂĄlatĂĄbĂłl eredĆ fĂ©lreĂ©rtĂ©sekĂ©rt vagy tĂ©ves Ă©rtelmezĂ©sekĂ©rt.