Du har en array med frukter og vil sortere dem alfabetisk. Eller du trenger å vite om arrayen inneholder "banan". Eller du vil gjøre hele arrayen om til en kommaseparert streng. Alt dette løser du med array-metoder i JavaScript, og de sparer deg for å skrive den samme logikken manuelt hver gang.
length: finn ut hvor mange elementer arrayen har
Strengt tatt er length ikke en metode, men en egenskap som automatisk oppdateres når du legger til eller fjerner elementer. Den forteller deg hvor mange elementer en array inneholder:
let frukt = ["eple", "paere", "banan", "drue", "melon", "kiwi"];
frukt.length gir 6
Legg merke til at du ikke bruker parenteser etter length, nettopp fordi det er en egenskap og ikke en metode. Length er spesielt nyttig sammen med for-løkker. I stedet for å skrive et fast tall i den logiske testen, bruker du i < frukt.length, og løkken tilpasser seg automatisk uansett hvor mange elementer arrayen har.
En ting å passe på: hvis du legger til en verdi på en høy indeks (for eksempel frukt[20] = "appelsin"), teller length også de tomme plassene. Da rapporterer den 21 elementer selv om du bare har 7 reelle verdier.
sort og reverse: sorter arrayen
Metoden sort() sorterer elementene i arrayen alfabetisk:
frukt.sort();
Etter denne operasjonen er frukt-arrayen omorganisert fra A til Å. Vil du ha motsatt rekkefølge, bruker du reverse() rett etterpå:
frukt.reverse();
Begge disse metodene endrer selve arrayen permanent. Det betyr at elementene får nye indeksnumre. Hvis du bruker arrayen senere og forventer at "eple" fortsatt er på indeks 0, kan du få en overraskelse. Ta høyde for dette når du sorterer arrayer som brukes flere steder i koden.
join: gjør arrayen om til en streng
Metoden join() setter sammen alle elementene i arrayen til én streng. Du bestemmer selv hva som skal stå mellom hvert element:
let fruktStreng = frukt.join(" - ");
Resultatet er en streng der hver frukt er adskilt med " - ". Du kan bruke hvilket tegn du vil: komma, mellomrom, bindestrek eller ingenting i det hele tatt. En tom streng i parentesen (frukt.join("")) limer verdiene sammen uten noe mellom.
Resultatet av join er alltid en streng, ikke en array. Det betyr at du ikke lenger kan hente ut enkeltelementer med indeks. Trenger du å gjøre det motsatte og dele opp en streng til en array, bruker du split() på strengen. De to metodene utfyller hverandre.
split: fra streng til array
Selv om split() teknisk sett er en strengmetode og ikke en array-metode, hører den naturlig sammen med join. Du angir hvor strengen skal deles, og resultatet er en ny array:
let setning = "hei på deg";
let ord = setning.split(" ");
Nå er ord en array med tre elementer: "hei", "på" og "deg". Bruker du en tom streng som argument (setning.split("")), deles strengen opp i enkelttegn. Denne kombinasjonen av split og join er nyttig for å manipulere tekst. Du kan for eksempel gjøre første bokstav i et ord til stor bokstav ved å splitte ordet til enkelttegn, endre det første tegnet med toUpperCase(), og deretter joine det tilbake.
includes: sjekk om en verdi finnes
Trenger du å vite om arrayen inneholder en bestemt verdi, bruker du includes():
frukt.includes("banan") gir true
frukt.includes("klementin") gir false
Metoden returnerer en boolsk verdi, enten true eller false. Den er perfekt i kombinasjon med if-setninger. For eksempel kan du sjekke om en brukers valg finnes i en liste over gyldige alternativer. Includes ser etter eksakte treff, så "Banan" med stor B vil gi false hvis arrayen inneholder "banan" med liten b.
indexOf: finn posisjonen til en verdi
Mens includes bare svarer ja eller nei, forteller indexOf() deg nøyaktig hvor i arrayen verdien befinner seg:
frukt.indexOf("banan") gir indeksnummeret til "banan"
Finnes ikke verdien i arrayen, returnerer indexOf -1. Det finnes ingen indeks -1 i arrays, så dette er en tydelig indikator på at verdien ikke er der. Du kan bruke resultatet direkte i koden: sjekk om resultatet er -1 for å avgjøre om verdien mangler, eller bruk indeksnummeret til å hente eller erstatte verdien.
Kombinere array-metoder i JavaScript
Den virkelige styrken til array-metoder viser seg når du kombinerer dem. Et praktisk eksempel fra kurset: lag en funksjon som tar inn en streng, gjør første bokstav stor, og returnerer resultatet. Fremgangsmåten er å bruke split for å dele strengen i enkelttegn, endre det første elementet med toUpperCase, og deretter bruke join for å sette strengen sammen igjen.
Slike kombinasjoner er vanlige i JavaScript. Når du først har lært de grunnleggende array-metodene, begynner du å se muligheter for å koble dem sammen til løsninger du ellers måtte skrevet mange linjer kode for å oppnå.
Neste steg
Metodene i denne artikkelen dekker de vanligste operasjonene du trenger for å jobbe med arrayer. Neste naturlige steg er å bruke for-løkker til å gå gjennom hvert element i en array automatisk, noe som åpner for langt kraftigere behandling av data. For den komplette listen over array-metoder i JavaScript, se MDN sin Array-referanse.
Denne videoen er hentet fra kurset JavaScript for nybegynnere på Utdannet.no. Instruktør Lars Vidar Nordli viser deg array-metoder steg for steg med praktiske eksempler, og bygger videre mot funksjoner, løkker og DOM-manipulering gjennom resten av kurset.
