Del 3: Arrays

Arrays

En array er en liste med data, vanligvis relatert (elementene har ofte en sammenheng med hverandre).

Eksempler på bruk av array er vennelisten din på Facebook, en liste over leiligheter på Airbnb, en liste av kommentarer på et Instagram-innlegg.

En array kan bestå av strings, tall, booleans eller en miks av ulike datatyper.

For å lage en array bruker vi firkant-paranteser [], og skiller verdiene med komma. Her er et par eksempler:

let venner = ["venn1", "venn2", "venn3"]
let amazonRatings = [4, 4.6, 3.2, 5, 5.5]

Vi skal se litt ekstra på arrayet handleListe som skal inneholde matvarer vi trenger på butikken.

let handleListe = ["melk", "egg", "brød"];
console.log(handleListe);

Nedenfor er handleListe-arrayet visualisert:

En array
Illustrasjon av en array.

Plassen et element har i arrayet heter elementets indeks-nummer. Det første elementet i arrayet har indeks-nummer 0, det neste elementet har indeks-nummer 1 og så videre.

Du kan bruke indeks-nummeret når du vil skrive ut et spesifikt element. For eksempel hvis du vil skrive ut melk og brød fra listen handleListe, gjør du slik:

Loading editor...

let handleListe = ["melk", "egg", "brød"];
console.log(handleListe[0]);
console.log(handleListe[2])

Du kan endre et element i en array ved å gi en ny verdi til et spesifikt indeksnummer:

Loading editor...

let handleListe = ["melk", "egg", "brød"];
handleListe[2] = "rundstykker"
console.log(handleListe)

Array-metoder

En array har mange innebygde metoder du kan bruke for å endre den. Du kan for eksempel legge til et nytt element på slutten med push():

Loading editor...

let handleListe = ["melk", "egg", "brød"];
handleListe.push("kakao");
console.log(handleListe);

Du kan fjerne det siste elementet med pop():

Loading editor...

let handleListe = ["melk", "egg", "brød"];
handleListe.pop();
console.log(handleListe);

For å finne ut hvor mange verdier det er i listen, bruker vi length:

Loading editor...

let handleListe = ["melk", "egg", "brød"];
console.log(handleListe.length)

Flere nyttige metoder

Det finnes mange flere metoder for arrays. shift() fjerner det første elementet, unshift() legger til et nytt først, indexOf() finner posisjonen til et element, includes() sjekker om et element finnes, og concat() slår sammen to arrays. Vi ser mer på noen av dem i oppgavene nedenfor.

Objects - ikke krav å kunne
▼ Vis mer
Flervalgsoppgaver – arrays

Trykk på riktig alternativ for hvert spørsmål. Grønn betyr riktig svar, rød betyr feil.

Oppgave 1: Hva skrives ut?
Hva vil denne koden skrive ut i konsollen?
let animals = ["Hund", "Katt", "Fugl"];
console.log(animals[1]);
Oppgave 2: Hva gjør pop()?
Hva vil arrayet inneholde etter at vi bruker pop()?
let colors = ["Rød", "Grønn", "Blå"];
colors.pop();
Oppgave 3: Hva gjør push()?
Hva gjør push() i en array?
Oppgave 4: Hva er length?
Hva returnerer length når vi har tre elementer i arrayet?
let dyr = ["Hund", "Katt", "Fugl"];
console.log(dyr.length);
Programmeringsoppgaver – arrays og logikk

Oppgave 1: Skriv ut bestemte frukter
Lag en array fruits med minst tre frukter. Skriv ut den første og siste frukten. (Hint: Bruk indeksen fruits.length - 1 for siste element.)
let fruits = ["Eple", "Banan", "Appelsin"];

// Skriv ut første og siste frukt
Oppgave 2: Utforsk shift(), unshift() og indexOf()
Lag en array fruits med noen frukter. Bruk shift() til å fjerne den første frukten, unshift() til å legge til en ny frukt i starten, og indexOf() til å finne posisjonen til en bestemt frukt. Skriv ut resultatene underveis for å se hva som skjer.
let fruits = ["Eple", "Banan", "Appelsin"];

// Fjern første frukt med shift()

// Legg til en ny frukt først med unshift()

// Finn posisjonen til "Appelsin" med indexOf()

// Skriv ut resultatene
Oppgave 3: Arbeid med array-metoder
Lag en array colors som inneholder fargene 'red', 'green' og 'blue'. Bruk metoder og bytting av verdier for å endre rekkefølgen og innholdet.
// 1. Lag en array med 'red', 'green' og 'blue'
// 2. Legg til 'black' på slutten og skriv ut arrayet
// 3. Fjern 'red', bytt plass på 'green' og 'blue'
// 4. Legg til 'yellow' først og skriv ut resultatet