16 KiB

Raw Blame History

Osnove JavaScripta: Tabele in Zanke

Sketchnote avtorja Tomomi Imura

Predhodni kviz

Ste se kdaj spraševali, kako spletne strani sledijo predmetom v nakupovalni košarici ali prikazujejo seznam vaših prijateljev? Tukaj pridejo v igro tabele in zanke. Tabele so kot digitalne posode, ki vsebujejo več kosov informacij, medtem ko vam zanke omogočajo učinkovito delo z vsemi temi podatki brez ponavljajoče se kode.

Skupaj ti dve koncepti tvorita osnovo za obdelavo informacij v vaših programih. Naučili se boste, kako preiti od ročnega pisanja vsakega koraka do ustvarjanja pametne, učinkovite kode, ki lahko hitro obdela na stotine ali celo tisoče elementov.

Do konca te lekcije boste razumeli, kako doseči kompleksne naloge obdelave podatkov z le nekaj vrsticami kode. Raziskujmo te ključne programerske koncepte.

🎥 Kliknite na zgornje slike za videoposnetke o tabelah in zankah.

To lekcijo lahko opravite na Microsoft Learn!

Tabele

Pomislite na tabele kot na digitalno omaro za dokumente - namesto da shranjujete en dokument na predal, lahko organizirate več povezanih elementov v eno samo strukturirano posodo. V programerskem smislu vam tabele omogočajo shranjevanje več kosov informacij v enem organiziranem paketu.

Ne glede na to, ali gradite galerijo fotografij, upravljate seznam opravil ali sledite najboljšim rezultatom v igri, tabele zagotavljajo osnovo za organizacijo podatkov. Poglejmo, kako delujejo.

✅ Tabele so povsod okoli nas! Ali lahko pomislite na primer iz resničnega življenja, kot je na primer niz sončnih panelov?

Ustvarjanje tabel

Ustvarjanje tabele je zelo preprosto - uporabite le oglate oklepaje!

// Empty array - like an empty shopping cart waiting for items
const myArray = [];

Kaj se tukaj dogaja? Pravkar ste ustvarili prazno posodo z uporabo teh oglatih oklepajev []. Pomislite na to kot na prazno knjižno polico - pripravljena je, da vanjo shranite karkoli želite.

Tabelo lahko napolnite tudi z začetnimi vrednostmi že od začetka:

// Your ice cream shop's flavor menu
const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// A user's profile info (mixing different types of data)
const userData = ["John", 25, true, "developer"];

// Test scores for your favorite class
const scores = [95, 87, 92, 78, 85];

Kul stvari, ki jih je treba opaziti:

V isto tabelo lahko shranite besedilo, številke ali celo vrednosti true/false
Samo ločite vsak element z vejico - enostavno!
Tabele so popolne za shranjevanje povezanih informacij skupaj

Indeksiranje tabel

Tukaj je nekaj, kar se vam na začetku morda zdi nenavadno: tabele številčijo svoje elemente, začenši z 0, ne z 1. To indeksiranje, ki se začne z ničlo, ima korenine v delovanju računalniškega pomnilnika - to je programerska konvencija že od zgodnjih dni programskih jezikov, kot je C. Vsakemu mestu v tabeli je dodeljena lastna številka naslova, imenovana indeks.

Indeks	Vrednost	Opis
0	"Čokolada"	Prvi element
1	"Jagoda"	Drugi element
2	"Vanilija"	Tretji element
3	"Pistacija"	Četrti element
4	"Rocky Road"	Peti element

✅ Vas preseneča, da tabele začnejo z ničelnim indeksom? V nekaterih programskih jezikih indeksi začnejo z 1. Obstaja zanimiva zgodovina o tem, ki jo lahko preberete na Wikipediji.

Dostop do elementov tabele:

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

// Access individual elements using bracket notation
console.log(iceCreamFlavors[0]); // "Chocolate" - first element
console.log(iceCreamFlavors[2]); // "Vanilla" - third element
console.log(iceCreamFlavors[4]); // "Rocky Road" - last element

Razčlenitev dogajanja tukaj:

Uporablja notacijo z oglatimi oklepaji z indeksom za dostop do elementov
Vrne vrednost, shranjeno na določenem mestu v tabeli
Začne šteti od 0, kar pomeni, da je prvi element indeks 0

Spreminjanje elementov tabele:

// Change an existing value
iceCreamFlavors[4] = "Butter Pecan";
console.log(iceCreamFlavors[4]); // "Butter Pecan"

// Add a new element at the end
iceCreamFlavors[5] = "Cookie Dough";
console.log(iceCreamFlavors[5]); // "Cookie Dough"

V zgornjem primeru smo:

Spremenili element na indeksu 4 iz "Rocky Road" v "Butter Pecan"
Dodali nov element "Cookie Dough" na indeksu 5
Samodejno razširili dolžino tabele pri dodajanju elementov izven trenutnih meja

Dolžina tabele in pogoste metode

Tabele imajo vgrajene lastnosti in metode, ki močno olajšajo delo s podatki.

Iskanje dolžine tabele:

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
console.log(iceCreamFlavors.length); // 5

// Length updates automatically as array changes
iceCreamFlavors.push("Mint Chip");
console.log(iceCreamFlavors.length); // 6

Ključne točke za zapomniti:

Vrne skupno število elementov v tabeli
Samodejno se posodobi, ko se elementi dodajajo ali odstranjujejo
Nudi dinamično štetje, ki je uporabno za zanke in validacijo

Osnovne metode tabel:

const fruits = ["apple", "banana", "orange"];

// Add elements
fruits.push("grape");           // Adds to end: ["apple", "banana", "orange", "grape"]
fruits.unshift("strawberry");   // Adds to beginning: ["strawberry", "apple", "banana", "orange", "grape"]

// Remove elements
const lastFruit = fruits.pop();        // Removes and returns "grape"
const firstFruit = fruits.shift();     // Removes and returns "strawberry"

// Find elements
const index = fruits.indexOf("banana"); // Returns 1 (position of "banana")
const hasApple = fruits.includes("apple"); // Returns true

Razumevanje teh metod:

Dodaja elemente z push() (na konec) in unshift() (na začetek)
Odstranjuje elemente z pop() (na koncu) in shift() (na začetku)
Poišče elemente z indexOf() in preveri obstoj z includes()
Vrne uporabne vrednosti, kot so odstranjeni elementi ali indeksi položajev

✅ Poskusite sami! Uporabite konzolo svojega brskalnika za ustvarjanje in spreminjanje tabele po svoji izbiri.

Zanke

Pomislite na znano kazen iz romanov Charlesa Dickensa, kjer so morali učenci večkrat zapisati stavke na tablico. Predstavljajte si, da bi lahko nekomu preprosto naročili: "Zapiši ta stavek 100-krat" in bi bilo to samodejno opravljeno. Točno to počnejo zanke za vašo kodo.

Zanke so kot neumorni pomočnik, ki lahko ponavlja naloge brez napak. Ne glede na to, ali morate preveriti vsak predmet v nakupovalni košarici ali prikazati vse fotografije v albumu, zanke učinkovito obvladujejo ponavljanje.

JavaScript ponuja več vrst zank, med katerimi lahko izbirate. Poglejmo vsako posebej in razumimo, kdaj jih uporabiti.

Zanka For

Zanka for je kot nastavitev časovnika - točno veste, kolikokrat želite, da se nekaj zgodi. Je zelo organizirana in predvidljiva, kar jo naredi popolno, ko delate s tabelami ali morate nekaj prešteti.

Struktura zanke For:

Komponenta	Namen	Primer
Inicializacija	Nastavi začetno točko	`let i = 0`
Pogoj	Kdaj nadaljevati	`i < 10`
Inkrement	Kako posodobiti	`i++`

// Counting from 0 to 9
for (let i = 0; i < 10; i++) {
  console.log(`Count: ${i}`);
}

// More practical example: processing scores
const testScores = [85, 92, 78, 96, 88];
for (let i = 0; i < testScores.length; i++) {
  console.log(`Student ${i + 1}: ${testScores[i]}%`);
}

Korak za korakom, kaj se dogaja:

Inicializira števec spremenljivke i na 0 na začetku
Preveri pogoj i < 10 pred vsako iteracijo
Izvede blok kode, ko je pogoj resničen
Poveča i za 1 po vsaki iteraciji z i++
Ustavi, ko pogoj postane napačen (ko i doseže 10)

✅ Zaženite to kodo v konzoli brskalnika. Kaj se zgodi, ko naredite majhne spremembe števca, pogoja ali izraza za iteracijo? Ali lahko naredite, da deluje nazaj, kot odštevanje?

Zanka While

Zanka while je kot reči "nadaljuj s tem, dokler..." - morda ne veste točno, kolikokrat se bo zagnala, vendar veste, kdaj se bo ustavila. Je popolna za stvari, kot so zahteva po vnosu uporabnika, dokler ne dobite, kar potrebujete, ali iskanje po podatkih, dokler ne najdete, kar iščete.

Značilnosti zanke While:

Nadaljuje izvajanje, dokler je pogoj resničen
Zahteva ročno upravljanje vseh spremenljivk števca
Preveri pogoj pred vsako iteracijo
Tvega neskončne zanke, če pogoj nikoli ne postane napačen

// Basic counting example
let i = 0;
while (i < 10) {
  console.log(`While count: ${i}`);
  i++; // Don't forget to increment!
}

// More practical example: processing user input
let userInput = "";
let attempts = 0;
const maxAttempts = 3;

while (userInput !== "quit" && attempts < maxAttempts) {
  userInput = prompt(`Enter 'quit' to exit (attempt ${attempts + 1}):`);
  attempts++;
}

if (attempts >= maxAttempts) {
  console.log("Maximum attempts reached!");
}

Razumevanje teh primerov:

Upravlja števec spremenljivke i ročno znotraj telesa zanke
Poveča števec, da prepreči neskončne zanke
Prikazuje praktično uporabo z uporabniškim vnosom in omejevanjem poskusov
Vključuje varnostne mehanizme za preprečevanje neskončnega izvajanja

Sodobne alternative zank

JavaScript ponuja sodobno sintakso zank, ki lahko naredi vašo kodo bolj berljivo in manj nagnjeno k napakam.

Zanka For...of (ES6+):

const colors = ["red", "green", "blue", "yellow"];

// Modern approach - cleaner and safer
for (const color of colors) {
  console.log(`Color: ${color}`);
}

// Compare with traditional for loop
for (let i = 0; i < colors.length; i++) {
  console.log(`Color: ${colors[i]}`);
}

Ključne prednosti for...of:

Odpravlja upravljanje indeksov in morebitne napake pri štetju
Omogoča neposreden dostop do elementov tabele
Izboljša berljivost kode in zmanjša kompleksnost sintakse

Metoda forEach:

const prices = [9.99, 15.50, 22.75, 8.25];

// Using forEach for functional programming style
prices.forEach((price, index) => {
  console.log(`Item ${index + 1}: $${price.toFixed(2)}`);
});

// forEach with arrow functions for simple operations
prices.forEach(price => console.log(`Price: $${price}`));

Kaj morate vedeti o forEach:

Izvede funkcijo za vsak element tabele
Omogoča dostop do vrednosti elementa in indeksa kot parametrov
Ne more biti predčasno ustavljena (za razliko od tradicionalnih zank)
Vrne undefined (ne ustvari nove tabele)

✅ Zakaj bi izbrali zanko for namesto zanke while? 17.000 gledalcev je imelo isto vprašanje na StackOverflow, nekatera mnenja bi vas lahko zanimala.

Zanke in tabele

Združevanje tabel z zankami ustvarja močne zmogljivosti za obdelavo podatkov. Ta kombinacija je temelj mnogih programerskih nalog, od prikazovanja seznamov do izračunavanja statistike.

Tradicionalna obdelava tabel:

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

// Classic for loop approach
for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(`Flavor ${i + 1}: ${iceCreamFlavors[i]}`);
}

// Modern for...of approach
for (const flavor of iceCreamFlavors) {
  console.log(`Available flavor: ${flavor}`);
}

Razumimo vsak pristop:

Uporablja lastnost dolžine tabele za določanje meje zanke
Dostopa do elementov po indeksu v tradicionalnih zankah for
Omogoča neposreden dostop do elementov v zankah for...of
Obdeluje vsak element tabele natanko enkrat

Praktičen primer obdelave podatkov:

const studentGrades = [85, 92, 78, 96, 88, 73, 89];
let total = 0;
let highestGrade = studentGrades[0];
let lowestGrade = studentGrades[0];

// Process all grades with a single loop
for (let i = 0; i < studentGrades.length; i++) {
  const grade = studentGrades[i];
  total += grade;
  
  if (grade > highestGrade) {
    highestGrade = grade;
  }
  
  if (grade < lowestGrade) {
    lowestGrade = grade;
  }
}

const average = total / studentGrades.length;
console.log(`Average: ${average.toFixed(1)}`);
console.log(`Highest: ${highestGrade}`);
console.log(`Lowest: ${lowestGrade}`);

Kako deluje ta koda:

Inicializira sledilne spremenljivke za vsoto in skrajnosti
Obdeluje vsako oceno z eno učinkovito zanko
Sešteva skupno za izračun povprečja
Sledi najvišjim in najnižjim vrednostim med iteracijo
Izračuna končne statistike po zaključku zanke

✅ Eksperimentirajte z zanko čez tabelo, ki ste jo sami ustvarili v konzoli brskalnika.

GitHub Copilot Agent izziv 🚀

Uporabite način Agent za dokončanje naslednjega izziva:

Opis: Zgradite celovito funkcijo za obdelavo podatkov, ki združuje tabele in zanke za analizo nabora podatkov ter generiranje smiselnih vpogledov.

Navodilo: Ustvarite funkcijo z imenom analyzeGrades, ki sprejme tabelo objektov z ocenami študentov (vsak vsebuje lastnosti ime in ocena) ter vrne objekt s statistiko, vključno z najvišjo oceno, najnižjo oceno, povprečno oceno, številom študentov, ki so opravili (ocena >= 70), in tabelo imen študentov, ki so dosegli nadpovprečne ocene. V svoji rešitvi uporabite vsaj dve različni vrsti zank.

Več o načinu agent si preberite tukaj.

🚀 Izziv

JavaScript ponuja več sodobnih metod tabel, ki lahko nadomestijo tradicionalne zanke za specifične naloge. Raziščite forEach, for-of, map, filter in reduce.

Vaš izziv: Preoblikujte primer ocen študentov z uporabo vsaj treh različnih metod tabel. Opazite, kako postane koda s sodobno sintakso JavaScripta bolj čista in berljiva.

Kviz po predavanju

Pregled in samostojno učenje

Tabele v JavaScriptu imajo veliko metod, ki so izjemno uporabne za manipulacijo podatkov. Preberite več o teh metodah in poskusite nekatere od njih (kot so push, pop, slice in splice) na tabeli, ki jo sami ustvarite.

Naloga

Zanka čez tabelo

Omejitev odgovornosti:
Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco Co-op Translator. Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitne nesporazume ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.

16 KiB Raw Blame History