7.2 KiB

Raw Blame History

JavaScriptin perusteet: Taulukot ja silmukat

Sketchnote: Tomomi Imura

Ennakkokysely

Tässä oppitunnissa käsitellään JavaScriptin perusteita, kieltä, joka tuo interaktiivisuutta verkkoon. Opit taulukoista ja silmukoista, joita käytetään datan käsittelyyn.

🎥 Klikkaa yllä olevia kuvia nähdäksesi videoita taulukoista ja silmukoista.

Voit käydä tämän oppitunnin Microsoft Learnissa!

Taulukot

Datan käsittely on yleinen tehtävä kaikissa ohjelmointikielissä, ja se on paljon helpompaa, kun data on järjestetty rakenteelliseen muotoon, kuten taulukkoon. Taulukoiden avulla data tallennetaan rakenteeseen, joka muistuttaa listaa. Yksi taulukoiden suurista eduista on, että voit tallentaa eri tyyppistä dataa yhteen taulukkoon.

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

Taulukon syntaksi koostuu hakasuluista.

let myArray = [];

Tämä on tyhjä taulukko, mutta taulukot voidaan määritellä jo valmiiksi datalla täytettyinä. Taulukon arvot erotetaan toisistaan pilkulla.

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

Taulukon arvoille annetaan yksilöllinen arvo, jota kutsutaan indeksiksi. Indeksi on kokonaisluku, joka määritetään sen etäisyyden perusteella taulukon alusta. Yllä olevassa esimerkissä merkkijonoarvolla "Chocolate" on indeksi 0, ja "Rocky Road" -arvon indeksi on 4. Käytä indeksiä hakasulkeiden kanssa arvojen hakemiseen, muuttamiseen tai lisäämiseen.

✅ Yllättääkö sinua, että taulukot alkavat indeksistä nolla? Joissakin ohjelmointikielissä indeksit alkavat ykkösestä. Tällä on mielenkiintoinen historia, josta voit lukea Wikipediassa.

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

Voit käyttää indeksiä arvon muuttamiseen, kuten tässä:

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

Ja voit lisätä uuden arvon tiettyyn indeksiin näin:

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

✅ Yleisempi tapa lisätä arvoja taulukkoon on käyttää taulukko-operaattoreita, kuten array.push()

Voit selvittää, kuinka monta arvoa taulukossa on, käyttämällä length-ominaisuutta.

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

✅ Kokeile itse! Käytä selaimesi konsolia luodaksesi ja muokataksesi omaa taulukkoasi.

Silmukat

Silmukoiden avulla voimme suorittaa toistuvia tai iteratiivisia tehtäviä, mikä säästää paljon aikaa ja koodia. Jokainen iteraatio voi vaihdella muuttujien, arvojen ja ehtojen osalta. JavaScriptissä on erilaisia silmukoita, joilla on pieniä eroja, mutta ne tekevät pohjimmiltaan saman asian: käyvät dataa läpi.

For-silmukka

for-silmukka vaatii kolme osaa iteraatioon:

counter Muuttuja, joka yleensä alustetaan numerolla ja laskee iteraatioiden määrän
condition Lauseke, joka käyttää vertailuoperaattoreita ja pysäyttää silmukan, kun se on false
iteration-expression Suoritetaan jokaisen iteraation lopussa, yleensä laskurin arvon muuttamiseen

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

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

While-silmukka

Toisin kuin for-silmukan syntaksi, while-silmukka vaatii vain ehdon, joka pysäyttää silmukan, kun ehto muuttuu false. Silmukoiden ehdot yleensä riippuvat muista arvoista, kuten laskureista, ja niitä on hallittava silmukan aikana. Laskureiden alkuarvot on luotava silmukan ulkopuolella, ja kaikki lausekkeet, jotka täyttävät ehdon, mukaan lukien laskurin muuttaminen, on ylläpidettävä silmukan sisällä.

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

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

Silmukat ja taulukot

Taulukoita käytetään usein silmukoiden kanssa, koska useimmat ehdot vaativat taulukon pituuden silmukan pysäyttämiseksi, ja indeksi voi myös toimia laskurin arvona.

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

✅ Kokeile silmukoida oma taulukkosi selaimesi konsolissa.

🚀 Haaste

Taulukoiden silmukoimiseen on muitakin tapoja kuin for- ja while-silmukat. Esimerkiksi forEach, for-of ja map. Kirjoita taulukkosilmukkasi uudelleen käyttäen yhtä näistä tekniikoista.

Jälkikysely

Kertaus ja itseopiskelu

JavaScriptin taulukoilla on monia menetelmiä, jotka ovat erittäin hyödyllisiä datan käsittelyssä. Lue näistä menetelmistä ja kokeile joitakin niistä (kuten push, pop, slice ja splice) omalla taulukollasi.

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äinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.

7.2 KiB Raw Blame History