Ohjelmoinnin perusrakenteet javascriptillä

Sorakuilu

Sisältö

  1. Alkuun
  2. Työvälineet ja ympäristö, Javascriptin kirjoittaminen
  3. Muuttujat ja tietotyypit
  4. Operaattorit
  5. Ehtolauseet, boolean
  6. Funktiot (lohkot)
  7. Taulukot ja toistorakenteet
  8. Muut toistorakenteet

Taulukot ja toistolauseet

Taulukko luodaan Array-oliolla

var opiskelijat = new Array();
opiskelijat[0] = "Uuno";
opiskelijat[1] = "Anselmi";

tai hakasulkeilla:

var opiskelijat = ["Uuno", "Anselmi"];

Taulukon indeksinä on aina numero, ensimmäinen indeksi on 0.
Taulukon viimeistä seuraavan indeksin saa taulukko.length -metodilla (metodi palauttaa siis elementtien määrän). Viimeinen indeksi on siis taulukko.length - 1.

Esimerkki

opiskelijat[10] = "Helsinki";
length on nyt 11 eikä 3!

Taulukkoon lisääminen onnistuu seuraavasti:

opiskelijat[opiskelijat.length] = "Jeremias";
opiskelijat.push("Jeremias");

Taulukon tietojen korvaaminen ja taulukosta poistaminen, splice-metodi

var kuukaudet = ['tammi', 'maalis', 'huhti', 'kesä'];
kuukaudet.splice(1, 0, 'helmi');
// lisää indeksiin 1 arvon
console.log(kuukaudet);
// odotettu tulostus: Array ['tammi','helmi', 'maalis', 'huhti', 'kesä'];

kuukaudet.splice(4, 1, 'touko');
// korvaa 1 elementin indeksissä 4
console.log(kuukaudet);
// odotettu tulostus: Array ['tammi','helmi', 'maalis', 'huhti', 'touko'];

for

Perustaulukko

Yleinen taulukon läpikäyvä toistorakenne on seuraava:

for (alkuarvo; lopetusehto; muutos) {
// suoritettava koodi
}

Alkuarvon esittämistä varten luodaan tavallisesti oma apumuuttuja. Javascript käyttää varattua sanaa let lohkokohtaisten muuttujine käyttöö, tässä tapauksessa siis for-silmukan luoman lohkon käyttöön.

Lopetusehto määrittää, mihin asti apumuuttujan arvoa kasvatetaan (muutetaan, sitä voi myös vähentää). Kun ehto toeutuu, toiston suorittaminen loppuu.

Muutos näyttää, miten apumuuttujan arvoa muutetaan yhden silmukan kierroksen jälkeen.

JavaScriptin for-silmukalla käydään läpi taulukkoa. Taulukot pohjautuvat nollaan (siis ensimmäisen solun indeksi on 0 - kuten useimmissa ohjelmointikielissä).

let taulukko = ["yksi", "kaksi", "kolme", "neljä"];

for(let i = 0; i < taulukko.length; i++){
console.log(taulukko[i]);
}

/* tulostaa:
yksi
kaksi
kolme
neljä
*/

Kaksiulotteinen taulukko

Kaksiulotteinen taulukko vaatii edellisen lisäksi toisen apumuuttujan.

let taulukko = [{"lapsi": ["yksi", "kaksi", "kolme", "neljä"]},
{"lapsi": ["viisi", "kuusi", "seitsemän", "kahdeksan"]}];

for(let i = 0; i < taulukko.length; i++){
let lapsiTaulukko = taulukko[i].lapsi;
for(let j = 0; j < lapsiTaulukko.length; j++){
console.log(lapsiTaulukko[j]);
}
}

/* tulostaa:

yksi
kaksi
kolme
neljä
viisi
kuusi
seitsemän
kahdeksan
*/

Toistolause, joka keskeytyy jollakin ehdolla

Syntaksi

var taulukko = [...];

for(let i = 0; i < taulukko.length; i++){
if([ehto toteutuu]){
break;
}
console.log(taulukko[i]);
}

forEach

Javascriptissä on joustavampi rakenne taulukon läpikäymiseen: siihen ei aseteta alku- eikä lopetusarvoja, vaan se lukee koko taulukon läpi elementti kerrallaan.

Syntaksi

Array.prototype.forEach(callback([value, index, array]), thisArg)

Tämä metodi on osa array-prototyyppiä ja käytää callback -funktiota, jonka avulla voi lisätä mitä tahansa logiikkaa toiston sisälle. Toistoa ei samasta syystä voi keskeyttää, kuten tavallisessa silmukassa.

Jokainen forEach callback -funktio hyväksyy kolme argumenttia (ne voi myös jättää pois):

Tavallisesti silmukkaa käytetään seuraavasti:

taulukko.forEach(function(elementti) {
console.log(elementti);
});

/* tulostaa:
yksi
kaksi
kolme
neljä
*/

Jos haluat käyttää laskentaa, esimerkiksi elementtien lukumäärän, aseta silmukan ulkopuolelle apumuuttuja:

let lkm = 0;

taulukko.forEach(function(elementti, i) {
lkm++;
});
console.log("forEach tuotti: ", lkm, " elementtiä.");

// forEach tuotti: 4 elementtiä.

forEach silmukkaa ei voi lopettaa break:lla.


Demot 5, toistolauseet ja taulukot

Harjoitukset 5, toistolauseet ja taulukot