JavaScript includes(): En Komplet Guide

Næsten alle programmeringssprog tilbyder en række indbyggede metoder for at gøre udvikleres liv lettere, og JavaScript er ingen undtagelse. Disse værktøjer er designet til at løse almindelige problemer effektivt og med minimal kode. En af de mest nyttige og ofte anvendte metoder i JavaScript er includes(). Denne metode giver en enkel og læsbar måde at kontrollere, om et bestemt element findes inden i en streng eller et array. I denne artikel vil vi dykke ned i alt, hvad du behøver at vide om includes()-metoden, fra dens grundlæggende definition og syntaks til praktiske eksempler og sammenligninger med andre metoder.

Hvad er includes() metoden?

Kort sagt bruges includes() metoden til at afgøre, om et array indeholder en bestemt værdi, eller om en streng indeholder en bestemt understreng. Metoden returnerer en boolesk værdi: true, hvis værdien findes, og false, hvis den ikke gør. Dette gør den utrolig intuitiv at bruge til validering og søgning, da resultatet er et direkte ja-eller-nej-svar.

Før introduktionen af includes() i ES6 (ECMAScript 2015) måtte udviklere ofte ty til metoden indexOf(). Dette krævede en sammenligning med -1 for at se, om et element eksisterede (array.indexOf(element) !== -1), hvilket er mindre læseligt og mere omstændeligt end den simple array.includes(element).

Sådan bruges includes() med Arrays

Når den anvendes på et array, itererer includes() metoden gennem hvert element for at se, om det matcher den angivne værdi. Sammenligningen er streng (ligesom === operatoren), hvilket betyder, at både værdi og type skal matche.

Grundlæggende Eksempler med Arrays

Lad os se på nogle simple eksempler for at forstå, hvordan det virker:

// Tjekker for et tal i et array af tal [1, 2, 3, 4, 5].includes(3); // output: true // Tjekker for et tal, der ikke findes [1, 2, 3, 4, 5].includes(6); // output: false // Tjekker for en streng i et array af strenge let frugter = ['æble', 'banan', 'mango']; console.log(frugter.includes('banan')); // output: true // Tjekker for en streng, der ikke findes console.log(frugter.includes('pære')); // output: false

Det er vigtigt at bemærke, at includes() ikke fungerer til at søge *inden i* elementerne i et array. Hvis du har et array med en enkelt lang streng, vil metoden kun returnere true, hvis du søger efter præcis den samme lange streng, ikke en del af den.

console.log(['en lang sætning her'].includes('lang')); // output: false // Fordi 'lang' ikke er et element i arrayet. Elementet er 'en lang sætning her'.

Sådan bruges includes() med Strenge

Funktionaliteten af includes() på strenge er meget lig den på arrays, men her tjekker den for tilstedeværelsen af en *understreng* i stedet for et element. Metoden er case-sensitiv, hvilket betyder, at 'a' og 'A' betragtes som forskellige tegn.

Grundlæggende Eksempler med Strenge

Her er nogle eksempler på, hvordan includes() fungerer med strenge:

let sætning = 'Den hurtige brune ræv hopper over den dovne hund.'; // Tjekker for et helt ord sætning.includes('ræv'); // output: true // Tjekker for en del af et ord sætning.includes('hopp'); // output: true // Tjekker for en understreng, der ikke findes sætning.includes('kat'); // output: false // Metoden er case-sensitiv sætning.includes('Ræv'); // output: false (fordi 'R' er stort)

Udforskning af Syntaks og Parametre

Den fulde syntaks for includes() metoden giver lidt mere fleksibilitet end blot at søge fra starten.

For arrays: arr.includes(valueToFind, fromIndex)

For strenge: str.includes(searchString, position)

• valueToFind / searchString: Den værdi eller understreng, du vil søge efter. (Påkrævet)
• fromIndex / position: En valgfri parameter, der angiver det indeks, hvorfra søgningen skal begynde. Standardværdien er 0.

Brug af den valgfrie 'position' parameter

Denne parameter kan være meget nyttig, hvis du kun vil søge i en bestemt del af et array eller en streng. Lad os se på et eksempel:

let tal = [10, 20, 30, 40, 30, 50]; // Søg efter 30 fra starten (indeks 0) tal.includes(30); // output: true (finder den på indeks 2) // Søg efter 30, men start søgningen fra indeks 3 tal.includes(30, 3); // output: true (finder den på indeks 4) // Søg efter 20, men start søgningen fra indeks 2 tal.includes(20, 2); // output: false (fordi 20 er på indeks 1, som springes over)

For strenge fungerer det på samme måde. Husk, at strenge bruger nul-baseret indeksering, hvor det første tegn er på indeks 0.

let besked = 'Hej verden, velkommen til verden!'; // Søg efter 'verden' fra starten besked.includes('verden'); // output: true (finder den på indeks 4) // Søg efter 'verden', men start fra indeks 10 besked.includes('verden', 10); // output: true (finder den anden forekomst på indeks 25)

Sammenligning: includes() vs. indexOf()

Som nævnt tidligere var indexOf() den primære metode til at kontrollere eksistens før includes(). Selvom de kan opnå lignende resultater, er der vigtige forskelle, som gør dem egnede til forskellige situationer.

Den største tekniske forskel er håndteringen af NaN (Not-a-Number). indexOf() bruger streng lighed (===), som ikke kan finde NaN, mens includes() bruger en lidt anderledes algoritme (SameValueZero), der gør den i stand til det.

let mitArray = [1, 2, NaN, 4]; mitArray.indexOf(NaN); // output: -1 (kan ikke finde det) mitArray.includes(NaN); // output: true (finder det korrekt)

Ofte Stillede Spørgsmål (FAQ)

Kan includes() bruges på objekter i et array?

Ja, men det tjekker for reference, ikke for værdi. Det betyder, at det kun vil returnere true, hvis du søger efter præcis det samme objekt i hukommelsen, ikke et andet objekt med de samme egenskaber.

let obj1 = { id: 1 }; let obj2 = { id: 2 }; let obj3 = { id: 1 }; let objektArray = [obj1, obj2]; objektArray.includes(obj1); // output: true (det er den samme reference) objektArray.includes(obj3); // output: false (det er et andet objekt, selvom det har samme indhold)

Hvad sker der, hvis 'fromIndex' er større end arrayets længde?

Hvis fromIndex er større end eller lig med længden af arrayet, vil søgningen ikke blive udført, og metoden vil altid returnere false.

['a', 'b', 'c'].includes('a', 3); // output: false (arrayets længde er 3)

Hvordan kan jeg lave en case-insensitiv søgning med includes()?

Da includes() er case-sensitiv, skal du konvertere både strengen og søgestrengen til samme case (enten små eller store bogstaver) før du foretager sammenligningen.

let minStreng = 'JavaScript er FANTASTISK'; let søgeord = 'fantastisk'; minStreng.toLowerCase().includes(søgeord.toLowerCase()); // output: true

Konklusion

JavaScript's includes() metode er et kraftfuldt og brugervenligt værktøj til at kontrollere tilstedeværelsen af værdier i arrays og strenge. Dens simple true/false returværdi gør koden mere læsbar og mindre fejlbehæftet sammenlignet med ældre metoder som indexOf(). Ved at forstå dens syntaks, den valgfrie positionsparameter og dens adfærd med forskellige datatyper, kan du skrive mere effektiv og udtryksfuld JavaScript-kode.