7.0 KiB

Raw Blame History Unescape Escape

JavaScript'i põhialused: massiivid ja tsüklid

Sketchnote autor: Tomomi Imura

Loengu-eelne viktoriin

See õppetund käsitleb JavaScript'i põhialuseid, mis on veebilehtede interaktiivsuse aluseks. Selles õppetükis õpid tundma massiive ja tsükleid, mida kasutatakse andmete töötlemiseks.

🎥 Klõpsa ülaltoodud piltidel, et vaadata videoid massiivide ja tsüklite kohta.

Selle õppetunni leiad ka Microsoft Learnist!

Massiivid

Andmetega töötamine on igas programmeerimiskeeles tavaline ülesanne ja see on palju lihtsam, kui andmed on organiseeritud struktuursesse formaati, näiteks massiividesse. Massiivides salvestatakse andmed struktuuri, mis sarnaneb loendiga. Üks massiivide suur eelis on see, et ühes massiivis saab salvestada erinevat tüüpi andmeid.

✅ Massiivid on meie ümber kõikjal! Kas oskad mõelda mõnele päriselulisele massiivi näitele, näiteks päikesepaneelide massiiv?

Massiivi süntaksiks on paar nurksulge.

let myArray = [];

See on tühi massiiv, kuid massiivid saab deklareerida ka juba andmetega täidetuna. Massiivis eraldatakse väärtused üksteisest komaga.

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

Massiivi väärtustele määratakse unikaalne väärtus, mida nimetatakse indeksiks – täisarv, mis määratakse vastavalt kaugusele massiivi algusest. Ülaltoodud näites on stringiväärtuse "Chocolate" indeks 0 ja "Rocky Road" indeks on 4. Kasuta indeksit koos nurksulgudega, et massiivi väärtusi kätte saada, muuta või lisada.

✅ Kas sind üllatab, et massiivid algavad nullindeksist? Mõnes programmeerimiskeeles algavad indeksid 1-st. Sellel on huvitav ajalugu, mida saad lugeda Wikipediast.

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

Indeksit saab kasutada väärtuse muutmiseks, näiteks nii:

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

Ja uue väärtuse lisamiseks kindlale indeksile nii:

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

✅ Levinum viis väärtuste lisamiseks massiivi on kasutada massiivi operaatoreid, näiteks array.push().

Et teada saada, mitu elementi massiivis on, kasuta length omadust.

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

✅ Proovi ise! Loo ja muuda oma loodud massiivi oma brauseri konsoolis.

Tsüklid

Tsüklid võimaldavad meil teha korduvaid või iteratiivseid ülesandeid, säästes sellega aega ja koodi. Iga iteratsioon võib erineda oma muutujate, väärtuste ja tingimuste poolest. JavaScript'is on erinevat tüüpi tsükleid, millel on väikesed erinevused, kuid mis sisuliselt teevad sama asja: kordavad andmeid.

For-tsükkel

for-tsükkel vajab iteratsiooniks kolme osa:

counter Muutuja, mis tavaliselt algab numbriga ja loendab iteratsioonide arvu
condition Avaldis, mis kasutab võrdlusoperaatoreid, et tsükkel peatuks, kui see muutub false
iteration-expression Käivitatakse iga iteratsiooni lõpus, tavaliselt kasutatakse loenduri väärtuse muutmiseks

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

✅ Käivita see kood brauseri konsoolis. Mis juhtub, kui teed loenduri, tingimuse või iteratsiooni avaldise osas väikeseid muudatusi? Kas saad selle panna tagurpidi töötama, luues tagasiloenduse?

While-tsükkel

Erinevalt for-tsükli süntaksist vajavad while-tsüklid ainult tingimust, mis peatab tsükli, kui tingimus muutub false. Tsüklite tingimused sõltuvad tavaliselt teistest väärtustest, näiteks loenduritest, ja neid tuleb tsükli ajal hallata. Loendurite algväärtused tuleb luua väljaspool tsüklit ning kõik tingimuse täitmiseks vajalikud avaldised, sealhulgas loenduri muutmine, tuleb hallata tsükli sees.

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

✅ Miks eelistaksid for-tsüklit while-tsüklile? 17 000 vaatajat on esitanud sama küsimuse StackOverflow's ja mõned arvamused võivad sulle huvi pakkuda.

Tsüklid ja massiivid

Massiive kasutatakse sageli koos tsüklitega, sest enamik tingimusi vajab tsükli peatamiseks massiivi pikkust ja indeks võib olla ka loenduri väärtus.

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

✅ Katseta oma loodud massiivi üle tsükli tegemist oma brauseri konsoolis.

🚀 Väljakutse

Massiivide üle tsükli tegemiseks on ka teisi viise peale for- ja while-tsüklite. Näiteks forEach, for-of ja map. Kirjuta oma massiivi tsükkel ümber, kasutades ühte neist tehnikatest.

Loengu-järgne viktoriin

Ülevaade ja iseseisev õppimine

JavaScript'i massiividel on palju meetodeid, mis on äärmiselt kasulikud andmete töötlemiseks. Loe nende meetodite kohta ja proovi mõnda neist (näiteks push, pop, slice ja splice) oma loodud massiivil.

Ülesanne

Massiivi tsükkel

Lahtiütlus:
See dokument on tõlgitud AI tõlketeenuse Co-op Translator abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest.

7.0 KiB Raw Blame History Unescape Escape