Frontend Academy · leksjon

Array-metoder: map, filter, reduce og find

Transformer, filtrer og aggreger arrayer med høyereordensmetoder i stedet for manuelle løkker. Kjed dem sammen for uttrykksfulle datapipelines.

Leksjon 1 av 413 trinn

Array-metoder: map, filter, reduce og find er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hvorfor array-metoder?

Imperative for-løkker fungerer, men skjuler hensikten. Array-metoder av høyere orden beskriver hva du ønsker, i stedet for hvordan du skal iterere. De gir renere, testbar og komponerbar kode som kan leses som prosa.

Array.map() — transformer hvert element

map() returnerer en ny array der hvert element er transformert av callbacken. Den opprinnelige arrayen endres ikke. Bruk metoden når du trenger å konvertere én array til en annen.

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() — velg samsvarende elementer

filter() returnerer en ny array som bare inneholder elementer som callbacken returnerer en truthy-verdi for. Callbacken er en predikatfunksjon.

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() — akkumuler en verdi

reduce(callback, initialValue) akkumulerer alle elementene til én enkelt verdi. Callbacken mottar akkumulatoren og det gjeldende elementet. Startverdien er akkumulatorens opprinnelige verdi.

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 treff

find() returnerer det første elementet som samsvarer med predikatet, eller undefined hvis det ikke finnes noe treff. Bruk metoden til å slå opp et element etter ID eller egenskapsverdi.

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 indeksen til elementet som samsvarer, eller -1 hvis det ikke ble funnet. Dette er nyttig når du skal finne ut hvor et element i en array skal oppdateres.

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

Array.some() og Array.every()

some() returnerer true hvis minst ett element består testen. every() returnerer true bare hvis alle elementene består testen. Begge avslutter søket ved det første entydige resultatet.

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() — map og flat ut

flatMap() mapper hvert element og flater deretter ut resultatet med ett nivå. Tilsvarer .map(...).flat(), men er mer effektivt.

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

Kjeding av array-metoder

Metodene returnerer nye arrayer, slik at du kan kjede dem. Les kjeder fra venstre mot høyre: filtrer først, transformer deretter, og aggreger til slutt.

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 siste elementet. includes(value) sjekker om en verdi finnes. Dette er mye ryddigere enn 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

Uforanderlighet: ikke endre data direkte

map, filter og reduce returnerer nye arrayer. push, pop og splice endrer den opprinnelige arrayen. I React-state skal du alltid opprette nye arrayer (med spread eller map) i stedet for å endre state direkte.

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

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

Hurtigsjekk

Hvilken array-metode returnerer en ny array med elementene som callbacken returnerer true for?

Besvar den i den interaktive leksjonen

Oppsummering: array-metoder

map() transformer hvert element. filter() velger samsvarende elementer. reduce() akkumulerer til én enkelt verdi. find() returnerer det første treffet. some()/every() tester om elementer oppfyller et kriterium. Kjeder av disse metodene erstatter nøstede løkker med lesbare, deklarative datapipelines.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Array-metoder: map, filter, reduce og find» gratis?

Ja – hele teksten i «Array-metoder: map, filter, reduce og find» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Array-metoder: map, filter, reduce og find»?

Transformer, filtrer og aggreger arrayer med høyereordensmetoder i stedet for manuelle løkker. Kjed dem sammen for uttrykksfulle datapipelines. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Frontend Academy?

Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Array-metoder: map, filter, reduce og find»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?

Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Array-metoder: map, filter, reduce og find
Destrukturering og spread av objekter
Template literals og optional chaining
Moduler: import og export

← Tilbake til Frontend Academy