Frontend Academy · Lektion

Array-metoder: map filter reduce find

Transformér, filtrér og aggregér arrays med higher-order-metoder i stedet for manuelle løkker. Kæd dem sammen til udtryksfulde datapipelines.

Lektion 1 af 413 trin

Array-metoder: map filter reduce find er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvorfor array-metoder?

Imperative for-løkker fungerer, men skjuler hensigten. Array-metoder af højere orden erklærer hvad du ønsker, i stedet for hvordan du vil iterere. De giver renere, testbar og komponerbar kode, der læses som løbende tekst.

Array.map() — Transformér hvert element

map() returnerer et nyt array, hvor hvert element er transformeret af callbackfunktionen. Det oprindelige array ændres ikke. Brug den, når du skal konvertere ét array til et andet.

const names = ['alice', 'bob', 'carol'];
const upper = names.map(name => name.toUpperCase());
// ['ALICE', 'BOB', 'CAROL']

const prices = [10, 20, 30];
const withTax = prices.map(p => p * 1.2);
// [12, 24, 36]

Array.filter() — Vælg matchende elementer

filter() returnerer et nyt array, der kun indeholder elementer, hvor callbackfunktionen returnerer en værdi, der evalueres som sand. Callbackfunktionen er en prædikatsfunktion.

const users = [
  { name: 'Alice', age: 22 },
  { name: 'Bob',   age: 17 },
  { name: 'Carol', age: 30 },
];
const adults = users.filter(u => u.age >= 18);
// [{ name: 'Alice', age: 22 }, { name: 'Carol', age: 30 }]

Array.reduce() — Akkumulér en værdi

reduce(callback, initialValue) akkumulerer alle elementer til én samlet værdi. Callbackfunktionen modtager akkumulatoren og det aktuelle element. Startværdien er akkumulatorens begyndelsesværdi.

const prices = [10, 20, 30, 40];
const total = prices.reduce((sum, price) => sum + price, 0);
// 100

const tallied = ['a', 'b', 'a', 'c', 'b', 'a'].reduce((acc, letter) => {
  acc[letter] = (acc[letter] || 0) + 1;
  return acc;
}, {});
// { a: 3, b: 2, c: 1 }

Array.find() — Første match

find() returnerer det første element, der matcher prædikatet, eller undefined, hvis der ikke er noget match. Brug den til at slå et element op via dets ID eller egenskabsværdi.

const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const bob = users.find(u => u.id === 2);
// { id: 2, name: 'Bob' }

const missing = users.find(u => u.id === 99);
// undefined

Array.findIndex()

findIndex() fungerer som find(), men returnerer indekset for det matchende element eller -1, hvis det ikke blev fundet. Det er nyttigt, når du skal finde ud af, hvor et element i et array skal opdateres.

const idx = users.findIndex(u => u.id === 2);
// 1

Array.some() og Array.every()

some() returnerer true, hvis mindst ét element består testen. every() returnerer true, kun hvis alle elementer består. Begge stopper ved det første entydige resultat.

const hasAdult = users.some(u => u.age >= 18);  // true if any adult
const allAdults = users.every(u => u.age >= 18); // true only if all adults

Array.flatMap() — Transformér og udflad

flatMap() transformerer hvert element og udflader derefter resultatet ét niveau. Svarer til .map(...).flat(), men er mere effektiv.

const sentences = ['Hello world', 'Foo bar'];
const words = sentences.flatMap(s => s.split(' '));
// ['Hello', 'world', 'Foo', 'bar']

Kædning af array-metoder

Metoderne returnerer nye arrays, så du kan kæde dem sammen. Læs kæder fra venstre mod højre: filtrér først, transformér derefter, og aggregér til sidst.

const result = products
  .filter(p => p.inStock)
  .map(p => ({ ...p, price: p.price * 0.9 })) // 10% discount
  .sort((a, b) => a.price - b.price)
  .slice(0, 5); // top 5 cheapest in-stock products

Array.at() og Array.includes()

at(-1) henter det sidste element. includes(value) tjekker, om en værdi findes. Det er meget renere end arr[arr.length - 1] og arr.indexOf(v) !== -1.

const arr = [1, 2, 3, 4, 5];
arr.at(-1);        // 5
arr.at(-2);        // 4
arr.includes(3);   // true
arr.includes(99);  // false

Uforanderlighed: Mutér ikke

map, filter og reduce returnerer nye arrays. push, pop og splice ændrer det oprindelige array. I React-tilstand skal du altid oprette nye arrays (med spredningsoperatoren eller map) i stedet for at ændre tilstanden direkte.

// Bad in React:
state.items.push(newItem); // mutates original

// Good:
const newItems = [...state.items, newItem]; // new array

Hurtig test

Hvilken array-metode returnerer et nyt array med de elementer, hvor callbackfunktionen returnerer true?

Besvar den i den interaktive lektion

Opsummering: Array-metoder

map() transformerer hvert element. filter() vælger matchende elementer. reduce() samler alle elementer til én værdi. find() returnerer det første match. some()/every() tester medlemskab. Kæder af disse metoder erstatter indlejrede løkker med læselige, deklarative dataforløb.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Array-metoder: map filter reduce find” gratis?

Ja — hele teksten til “Array-metoder: map filter reduce find” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Array-metoder: map filter reduce find”?

Transformér, filtrér og aggregér arrays med higher-order-metoder i stedet for manuelle løkker. Kæd dem sammen til udtryksfulde datapipelines. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Array-metoder: map filter reduce find”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Frontend Academy