Lister¶

Du har hørt begrepet, array, og lurer på hva det betyr? Et array er også det vi kan kalle en liste. En samling av elementer som er lagret i en bestemt rekkefølge. Vi kan ha lister med tall, strenger, objekter, eller andre lister. En liste kan inneholde en type, eller flere typer.

Nedenfor ser du en liste med tall:

const minListe = [1, 2, 3, 4, 5];
console.log(minListe[0]); // 1
console.log(minListe[1]); // 2
console.log(minListe[2]); // 3
console.log(minListe[3]); // 4
console.log(minListe[4]); // 5

const minListe: number[] = [1, 2, 3, 4, 5];
console.log(minListe[0]); // 1
console.log(minListe[1]); // 2
console.log(minListe[2]); // 3
console.log(minListe[3]); // 4
console.log(minListe[4]); // 5

Iterere over lister¶

I forrige eksempel så vi hvordan vi kan hente ut elementer fra en liste ved å bruke indekser. Vi kan også iterere over en liste ved å bruke en for-løkke. Nedenfor ser du et eksempel på hvordan vi kan gjøre dette:

const minListe = [1, 2, 3, 4, 5];
for (let i = 0; i < minListe.length; i++) {
    console.log(minListe[i]);
}

const minListe: number[] = [1, 2, 3, 4, 5];
for (let i = 0; i < minListe.length; i++) {
    console.log(minListe[i]);
}

Filtrere elementer i en liste¶

Lister i JavaScript har mange innebygde funksjoner som hjelper deg med å manipulere og filtrere elementer. En av disse funksjonene er filter. Nedenfor ser du et eksempel på hvordan vi kan bruke filter til å lage en ny liste som kun inneholder partall:

1
2
3

const minListe = [1, 2, 3, 4, 5];
const partall = minListe.filter(tall => tall % 2 === 0);
console.log(partall); // partall inneholder nå tallene [2, 4]

1
2
3

const minListe: number[] = [1, 2, 3, 4, 5];
const partall: number[] = minListe.filter(tall => tall % 2 === 0);
console.log(partall); // partall inneholder nå tallene [2, 4]

La oss bryte ned denne koden litt mer.¶

På linje en definerer vi en liste med tall:

const minListe = [1, 2, 3, 4, 5];

På linje to definerer vi en ny variabel som heter partall.

const partall = ...

Videre kaller vi funksjonen .filter(...) på minListe.

... = minListe.filter(...);

Det du kan se er at filter tar inn en funksjon som argument. Denne funksjonen tar ett argument(tall), og returnerer en bolsk verdi (true/false):

tall => tall % 2 === 0

function erPartall(tall) {
    return tall % 2 == 0;
}

const partall = minListe.filter(function (tall) { 
    return tall % 2 === 0; 
});

function erPartall(tall) {
    return tall % 2 == 0;
}

const partall = minListe.filter(erPartall);

Det som skjer her er at når du kaller .filter på en liste er at den vil iterere over alle verdier i listen, og kalle gitt funksjon med den verdien som argument. Når listen består av feks. [1, 2, 3], så vil den kalle erPartall funksjonen med henholdsvis 1, 2 og 3. Den funksjonen returnerer som sagt en bolsk verdi, true/false. Feks:

erPartall(1) // returnerer false
erPartall(2) // returnerer true
erPartall(3) // returnerer false

Den vil derfor forkaste/filtere ut alle elementer som er false (alle oddetall), og beholde de som er true (alle partall). Når den er ferdig med å kjøre vil den returnere en ny liste som da inneholder kun tall som er partall. Denne listen tilordner vi nå variabelen partall:

const partall = minListe.filter(tall => tall % 2 === 0);

På linje tre skriver vi ut listen i konsollet.

console.log(partall);

Vi kan også manupulere verdiene i en liste¶

Noen ganger ønsker vi å manipulere alle verdier i en liste. Her har vi blant annet funksjonen .map(...). Nedenfor er et eksempel på hvordan vi ønsker å gange alle tall i listen med 10:

const minListe = [1, 2, 3, 4, 5];
const nyListe = minListe.map(tall => tall * 10);
console.log(nyListe); // Denne skriver nå ut [10, 20, 30, 40, 50] i konsollet

const minListe: number[] = [1, 2, 3, 4, 5];
const nyListe: number[] = minListe.map(tall => tall * 10);
console.log(nyListe); // Denne skriver nå ut [10, 20, 30, 40, 50] i konsollet

Samme forklaring som for .filter gjelder også for .map. Forskjellen her er at vi nå legger ved en funksjon som returnerer en ny verdi for verdien den får inn.

function MinKomponent(): React.ReactNode {
    const listeMedNavn = ["Per", "Pål", "Askeladden"];

    return (
        <div>
            <h1>Liste med navn</h1>

            <ul>
            {listeMedNavn.map(navn => <li>{navn}</li>)}
            </ul>
        </div>
    )
}

<ul>
    <li>Per</li>
    <li>Pål</li>
    <li>Askeladden</li>
</ul>