17 KiB

Raw Blame History Unescape Escape

JavaScriptin perusteet: Taulukot ja silmukat

Kuvitus: Tomomi Imura

Ennen luentoa - Kysely

Oletko koskaan miettinyt, miten verkkosivustot pitävät kirjaa ostoskorin sisällöstä tai näyttävät ystävälistasi? Tässä kohtaa taulukot ja silmukat astuvat kuvaan. Taulukot ovat kuin digitaalisia säilytysastioita, jotka pitävät sisällään useita tietoja, kun taas silmukat auttavat käsittelemään näitä tietoja tehokkaasti ilman toistuvaa koodia.

Yhdessä nämä kaksi käsitettä muodostavat perustan tietojen käsittelylle ohjelmissasi. Opit siirtymään vaiheittaisesta koodin kirjoittamisesta älykkääseen ja tehokkaaseen koodiin, joka voi käsitellä satoja tai jopa tuhansia kohteita nopeasti.

Tämän oppitunnin lopussa ymmärrät, miten monimutkaisia tietotehtäviä voidaan suorittaa vain muutamalla koodirivillä. Tutkitaanpa näitä olennaisia ohjelmointikäsitteitä.

🎥 Klikkaa yllä olevia kuvia katsoaksesi videoita taulukoista ja silmukoista.

Voit käydä tämän oppitunnin läpi Microsoft Learn -sivustolla!

Taulukot

Ajattele taulukoita digitaalisena arkistokaappina – sen sijaan, että tallentaisit yhden asiakirjan per laatikko, voit järjestää useita toisiinsa liittyviä kohteita yhteen rakenteelliseen säiliöön. Ohjelmoinnissa taulukot mahdollistavat useiden tietojen tallentamisen yhteen järjestettyyn pakettiin.

Olitpa sitten rakentamassa valokuvagalleriaa, hallitsemassa tehtävälistaa tai pitämässä kirjaa pelin huipputuloksista, taulukot tarjoavat perustan tietojen järjestämiselle. Katsotaanpa, miten ne toimivat.

✅ Taulukoita on kaikkialla ympärillämme! Voitko keksiä esimerkin tosielämän taulukosta, kuten aurinkopaneelijärjestelmästä?

Taulukoiden luominen

Taulukon luominen on todella helppoa – käytä vain hakasulkeita!

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

Mitä tässä tapahtuu? Olet juuri luonut tyhjän säiliön käyttämällä hakasulkeita []. Ajattele sitä kuin tyhjää kirjahyllyä – se on valmis säilyttämään mitä tahansa kirjoja, jotka haluat sinne järjestää.

Voit myös täyttää taulukon alusta alkaen arvoilla:

// 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];

Huomionarvoisia asioita:

Voit tallentaa tekstiä, numeroita tai jopa tosi/epätosi-arvoja samaan taulukkoon
Erota jokainen kohde pilkulla – helppoa!
Taulukot ovat täydellisiä toisiinsa liittyvien tietojen säilyttämiseen yhdessä

Taulukon indeksointi

Tässä on jotain, mikä saattaa aluksi tuntua oudolta: taulukot numeroivat kohteensa alkaen nollasta, eivät yhdestä. Tämä nollapohjainen indeksointi juontaa juurensa tietokoneiden muistinhallinnasta – se on ollut ohjelmointikielien käytäntö jo varhaisista ajoista lähtien. Jokaisella taulukon kohdalla on oma osoitenumeronsa, jota kutsutaan indeksiksi.

Indeksi	Arvo	Kuvaus
0	"Suklaa"	Ensimmäinen elementti
1	"Mansikka"	Toinen elementti
2	"Vanilja"	Kolmas elementti
3	"Pistaasi"	Neljäs elementti
4	"Rocky Road"	Viides elementti

✅ Yllättääkö sinua, että taulukot alkavat nollasta? Joissakin ohjelmointikielissä indeksit alkavat yhdestä. Tähän liittyy mielenkiintoinen historia, josta voit lukea lisää Wikipediasta.

Taulukon elementtien käsittely:

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

Mitä tässä tapahtuu:

Käytetään hakasulkeita ja indeksinumeroa elementtien käsittelyyn
Palauttaa arvon, joka on tallennettu kyseiseen taulukon kohtaan
Aloittaa laskemisen nollasta, joten ensimmäinen elementti on indeksissä 0

Taulukon elementtien muokkaaminen:

// 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"

Yllä olevassa koodissa:

Muokataan elementtiä indeksissä 4 muuttamalla "Rocky Road" -> "Butter Pecan"
Lisätään uusi elementti "Cookie Dough" indeksiin 5
Laajennetaan taulukon pituutta automaattisesti, kun lisätään elementti nykyisten rajojen ulkopuolelle

Taulukon pituus ja yleiset metodit

Taulukoilla on sisäänrakennettuja ominaisuuksia ja metodeja, jotka helpottavat tietojen käsittelyä.

Taulukon pituuden selvittäminen:

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

Tärkeitä huomioita:

Palauttaa taulukon elementtien kokonaismäärän
Päivittyy automaattisesti, kun elementtejä lisätään tai poistetaan
Tarjoaa dynaamisen laskurin, joka on hyödyllinen silmukoissa ja tarkistuksissa

Tärkeitä taulukkometodeja:

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

Näiden metodien ymmärtäminen:

Lisää elementtejä push() (loppuun) ja unshift() (alkuun)
Poistaa elementtejä pop() (lopusta) ja shift() (alusta)
Etsii elementtejä indexOf()-metodilla ja tarkistaa olemassaolon includes()-metodilla
Palauttaa hyödyllisiä arvoja, kuten poistettuja elementtejä tai sijainti-indeksejä

✅ Kokeile itse! Luo ja muokkaa omaa taulukkoasi selaimen konsolissa.

Silmukat

Ajattele Charles Dickensin romaaneista tuttua rangaistusta, jossa oppilaiden piti kirjoittaa sama lause toistuvasti liitutaululle. Kuvittele, jos voisit vain käskeä jotakuta "kirjoita tämä lause 100 kertaa" ja se tapahtuisi automaattisesti. Juuri tätä silmukat tekevät koodillesi.

Silmukat ovat kuin väsymätön apulainen, joka voi toistaa tehtäviä virheettömästi. Tarvitsetpa sitten tarkistaa jokaisen ostoskorin tuotteen tai näyttää kaikki valokuvat albumissa, silmukat hoitavat toistuvat tehtävät tehokkaasti.

JavaScript tarjoaa useita erilaisia silmukoita, joista voit valita. Tarkastellaan kutakin ja ymmärretään, milloin niitä kannattaa käyttää.

For-silmukka

for-silmukka on kuin ajastimen asettaminen – tiedät tarkalleen, kuinka monta kertaa haluat jonkin tapahtuvan. Se on erittäin järjestelmällinen ja ennustettava, mikä tekee siitä täydellisen, kun työskentelet taulukoiden kanssa tai haluat laskea asioita.

For-silmukan rakenne:

Osa	Tarkoitus	Esimerkki
Alustus	Asettaa aloituspisteen	`let i = 0`
Ehto	Milloin jatketaan	`i < 10`
Inkrementti	Miten päivitetään	`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]}%`);
}

Vaihe vaiheelta, mitä tapahtuu:

Alustaa laskurin i arvoon 0 alussa
Tarkistaa ehdon i < 10 ennen jokaista iteraatiota
Suorittaa koodilohkon, kun ehto on tosi
Kasvattaa i:tä yhdellä jokaisen iteraation jälkeen i++-operaattorilla
Lopettaa, kun ehto ei enää täyty (kun i saavuttaa 10)

✅ Aja tämä koodi selaimen konsolissa. Mitä tapahtuu, kun teet pieniä muutoksia laskuriin, ehtoon tai iteraatioilmaisuun? Voitko saada sen toimimaan taaksepäin, luoden lähtölaskennan?

While-silmukka

while-silmukka on kuin sanoisit "jatka tätä, kunnes..." – et ehkä tiedä tarkalleen, kuinka monta kertaa se suoritetaan, mutta tiedät, milloin sen pitäisi pysähtyä. Se on täydellinen esimerkiksi silloin, kun pyydät käyttäjältä syötettä, kunnes saat haluamasi, tai etsit tietoa, kunnes löydät etsimäsi.

While-silmukan ominaisuudet:

Jatkaa suorittamista niin kauan kuin ehto on tosi
Vaatii laskurimuuttujien manuaalisen hallinnan
Tarkistaa ehdon ennen jokaista iteraatiota
Riski loputtomista silmukoista, jos ehto ei koskaan muutu epätodeksi

// 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!");
}

Näiden esimerkkien ymmärtäminen:

Hallinnoi laskurimuuttujaa i manuaalisesti silmukan sisällä
Kasvattaa laskuria estääkseen loputtomat silmukat
Havainnollistaa käytännön esimerkkiä käyttäjän syötteestä ja yritysrajoituksista
Sisältää turvamekanismeja loputtoman suorituksen estämiseksi

Modernit silmukkavaihtoehdot

JavaScript tarjoaa moderneja silmukkasynteesejä, jotka voivat tehdä koodistasi luettavampaa ja vähemmän virhealtista.

For...of-silmukka (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]}`);
}

For...of-silmukan edut:

Poistaa indeksinhallinnan ja mahdolliset virheet
Tarjoaa suoran pääsyn taulukon elementteihin
Parantaa koodin luettavuutta ja vähentää syntaksin monimutkaisuutta

forEach-metodi:

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}`));

Mitä sinun tulee tietää forEach-metodista:

Suorittaa funktion jokaiselle taulukon elementille
Tarjoaa sekä elementin arvon että indeksin parametreina
Ei voi keskeyttää ennenaikaisesti (toisin kuin perinteiset silmukat)
Palauttaa undefined (ei luo uutta taulukkoa)

✅ Miksi valitsisit for-silmukan while-silmukan sijaan? 17 000 katsojaa pohti samaa kysymystä StackOverflow'ssa, ja jotkut mielipiteet voivat olla sinulle mielenkiintoisia.

Silmukat ja taulukot

Taulukoiden ja silmukoiden yhdistäminen luo tehokkaita tietojenkäsittelymahdollisuuksia. Tämä yhdistelmä on olennainen monissa ohjelmointitehtävissä, kuten listojen näyttämisessä tai tilastojen laskemisessa.

Perinteinen taulukon käsittely:

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}`);
}

Ymmärretäänpä jokainen lähestymistapa:

Käyttää taulukon pituusominaisuutta silmukan rajojen määrittämiseen
Käsittelee elementtejä indeksin avulla perinteisissä for-silmukoissa
Tarjoaa suoran pääsyn elementteihin for...of-silmukoissa
Käsittelee jokaisen taulukon elementin täsmälleen kerran

Käytännön tietojenkäsittelyesimerkki:

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}`);

Näin tämä koodi toimii:

Alustaa seurantamuuttujat summalle ja ääripäille
Käsittelee jokaisen arvosanan yhdellä tehokkaalla silmukalla
Kertyy kokonaismäärä keskiarvon laskemista varten
Seuraa korkeimpia ja matalimpia arvoja iteraation aikana
Laskee lopulliset tilastot silmukan päätyttyä

✅ Kokeile silmukoida omaa taulukkoasi selaimen konsolissa.

GitHub Copilot Agent -haaste 🚀

Käytä Agent-tilaa suorittaaksesi seuraava haaste:

Kuvaus: Rakenna kattava tietojenkäsittelyfunktio, joka yhdistää taulukot ja silmukat analysoidakseen tietojoukon ja tuottaakseen merkityksellisiä oivalluksia.

Tehtävänanto: Luo funktio nimeltä analyzeGrades, joka ottaa parametrina taulukon opiskelijoiden arvosanaobjekteja (jokaisella on nimi- ja pistemääräominaisuudet) ja palauttaa objektin, joka sisältää tilastoja, kuten korkein pistemäärä, matalin pistemäärä, keskiarvo, hyväksyttyjen opiskelijoiden määrä (pistemäärä >= 70) ja taulukon opiskelijoiden nimistä, jotka saivat keskiarvoa paremman pistemäärän. Käytä ratkaisussasi vähintään kahta erilaista silmukkatyyppiä.

Lue lisää agent-tilasta täältä.

🚀 Haaste

JavaScript tarjoaa useita moderneja taulukkometodeja, jotka voivat korvata perinteiset silmukat tietyissä tehtävissä. Tutustu forEach, for-of, map, filter ja reduce -metodeihin.

Haasteesi: Refaktoroi opiskelijoiden arvosanaesimerkki käyttämällä vähintään kolmea erilaista taulukkometodia. Huomaa, kuinka paljon siistimmäksi ja luettavammaksi koodi muuttuu modernilla JavaScript-syntaksilla.

Luentojälkeinen kysely

Kertaus ja itseopiskelu

JavaScriptin taulukoilla on monia hyödyllisiä metodeja, jotka helpottavat tietojen käsittelyä. Lue lisää näistä metodeista ja kokeile joitakin niistä itse (kuten push, pop, slice ja splice) luomallasi taulukolla.

Tehtävä

Silmukoi taulukko

Vastuuvapauslauseke:
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua Co-op Translator. Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa tämän käännöksen käytöstä johtuvista väärinkäsityksistä tai virhetulkinnoista.

17 KiB Raw Blame History Unescape Escape