7.2 KiB

Raw Permalink Blame History

JavaScriptin perusteet: Taulukot ja silmukat

Sketchnote by Tomomi Imura

Ennakkokysely

Tämä oppitunti käsittelee JavaScriptin perusteita, kieltä, joka tuo interaktiivisuutta verkkoon. Tässä oppitunnissa 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ä. Useat arvot taulukossa erotetaan toisistaan pilkulla.

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

Taulukon arvoille annetaan yksilöllinen arvo, jota kutsutaan indeksiksi, kokonaisluvuksi, 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 hakeaksesi, muuttaaksesi tai lisätäksesi taulukon arvoja.

✅ Yllättääkö sinua, että taulukot alkavat nollasta? Joissakin ohjelmointikielissä indeksit alkavat 1:stä. Tällä on mielenkiintoinen historia, josta voit lukea Wikipediassa.

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

Voit käyttää indeksiä muuttaaksesi arvoa, 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

Silmukat mahdollistavat toistuvien tai iteratiivisten tehtävien suorittamisen ja voivat 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ä käytetään muuttamaan laskurin arvoa

// 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:ksi. Silmukoiden ehdot yleensä riippuvat muista arvoista, kuten laskureista, ja niitä täytyy hallita silmukan aikana. Laskureiden alkuarvot täytyy luoda silmukan ulkopuolella, ja kaikki lausekkeet, jotka täyttävät ehdon, mukaan lukien laskurin muuttaminen, täytyy ylläpitää 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ä StackOverflow'ssa, 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 omaa taulukkoasi selaimesi konsolissa.

🚀 Haaste

On olemassa muita tapoja silmukoida taulukoita kuin for- ja while-silmukat. Näitä ovat forEach, for-of ja map. Kirjoita taulukkosilmukkasi uudelleen käyttäen yhtä näistä tekniikoista.

Oppitunnin jälkeinen kysely

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. Pyrimme tarkkuuteen, mutta huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulee pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskääntämistä. Emme ole vastuussa tämän käännöksen käytöstä aiheutuvista väärinkäsityksistä tai virhetulkinnoista.

7.2 KiB Raw Permalink Blame History