Cityscape
Girl

JavaScript

Taulukot - Useiden arvojen tallentaminen

Helppo
10 min

Mikä on taulukko (array)?

Taulukko on erityinen datatyyppi, joka mahdollistaa useiden arvojen tallentamisen yhden muuttujan taakse. Sen sijaan, että olisi yksi vaijeri, joka yhdistää nimen yhteen arvoon, voit kuvitella taulukon pitkänä vaijerina, jossa on monta paikkaa - joista jokainen pitää sisällään yhden arvon. Nämä paikat ovat nimeltään indeksit, ja ne on numeroitu alkaen nollasta.

Tässä esimerkki hedelmillä:

let fruits = ["omena", "banaani", "kirsikka"];

Tässä koodissa määritämme muuttujan fruits käyttäen let-avainsanaa ja annamme sille arvoksi taulukon, joka sisältää kolme merkkijonoarvoa. Jokainen arvo on tallennettu tiettyyn indeksiin:

  • "omena" on indeksissä 0
  • "banaani" on indeksissä 1
  • "kirsikka" on indeksissä 2
Drawing canvas

Taulukon luominen

Taulukko luodaan käyttämällä hakasulkeita ja pilkulla erotettua arvolistaa:

let numbers = [1, 2, 3, 4];

Voit myös luoda tyhjän taulukon ja lisätä arvoja myöhemmin:

let tyhjäTaulukko = [];
tyhjäTaulukko[0] = "ensimmäinen";
tyhjäTaulukko[1] = "toinen";

Taulukon elementtien käsitteminen

Voit käsitellä taulukon "alkioita" käyttämällä alkion indeksiä. Esimerkiksi ensimmäisen alkion tulostamiseksi fruits-taulukosta kirjottaisit:

console.log(fruits[0]); // tulostaa "omena"

Luku hakasulkujen sisällä kertoo siis JavaScriptille, mitä kohtaa taulukosta, eli minkä indeksin arvon haluat lukea (tai kirjoittaa/muuttaa, kuten kohta tulevassa esimerkkikoodissa).

Taulukon arvojen muuttaminen

Voit vaihtaa arvon minkä tahansa indeksin kohdalla. Esimerkiksi, jos haluat vaihtaa "banaanin" "mustikkaan" fruits-taulukossa:

fruits[1] = "mustikka";
console.log(fruits); // tulostaa ["omena", "mustikka", "kirsikka"]

Tämä yhdistää "vaijerin" indeksissä 1 uuteen arvoon.

Uuden arvon lisääminen push()-metodilla

push()-metodi antaa sinun lisätä uuden arvon taulukon loppuun.

Esimerkiksi:

let colors = ["punainen", "vihreä"];
colors.push("sininen");
console.log(colors); // tulostaa ["punainen", "vihreä", "sininen"]

Elementtien poistaminen pop()-metodilla

pop()-metodi poistaa viimeisen elementin taulukosta ja palauttaa sen.

Esimerkiksi:

let numbers = [1, 2, 3, 4];
let poistettu = numbers.pop();
console.log(numbers); // tulostaa [1, 2, 3]
console.log(poistettu); // tulostaa 4

Harjoitukset

Taulukon luominen ja tulostaminen

  • Luo muuttuja nimeltä colors käyttäen let-avainsanaa.
  • Anna sille arvoksi taulukko, joka sisältää merkkijonot "punainen", "vihreä" ja "sininen".
  • Tulosta koko taulukko käyttäen console.log(colors).

Taulukon elementin hakeminen ja päivittäminen

  • Luo muuttuja nimeltään numbers käyttäen let-avainsanaa.
  • Aseta sille arvoksi taulukko arvoilla [5, 10, 15].
  • Päivitä indeksissä 1 oleva alkio arvoon 20.
  • Tulosta päivitetty alkio (numbers[1]) käyttäen console.log()-funktiota.

Tyhjän taulukon luominen ja täyttäminen

  • Luo muuttuja nimeltä animals käyttäen let-avainsanaa.
  • Alusta se tyhjään taulukkoon.
  • Anna arvot "kissa" indeksille 0, "koira" indeksille 1 ja "lintu" indeksille 2.
  • Tulosta koko taulukko käyttäen console.log(animals).

Elementin lisääminen push()-funktiolla

  • Luo muuttuja nimeltään colors käyttäen let-avainsanaa.
  • Määritä sille taulukko, joka sisältää merkkijonot "punainen" ja "vihreä".
  • Käytä push() -metodia lisätäksesi "sininen" taulukkoon.
  • Tulosta päivitetty taulukko käyttäen console.log(colors).

Elementin poistaminen pop()-funktiolla

  • Luo muuttuja nimeltä numbers käyttäen let.
  • Anna sille arvoksi taulukko joka sisältää [1, 2, 3, 4].
  • Käytä pop() -metodia poistaaksesi viimeisen elementin ja tallentaaksesi sen muuttujaan nimeltä removed.
  • Tulosta päivitetty taulukko ja poistettu elementti käyttäen console.log.
hakatemia pro

Valmis ryhtymään eettiseksi hakkeriksi?
Aloita jo tänään.

Hakatemian jäsenenä saat rajoittamattoman pääsyn Hakatemian moduuleihin, harjoituksiin ja työkaluihin, sekä pääset discord-kanavalle jossa voit pyytää apua sekä ohjaajilta että muilta Hakatemian jäseniltä.