JavaScript Academy · Lektion

Deklarativ datatransformering

Transformera data med map, filter och reduce.

Lektion 2 av 413 steg

Deklarativ datatransformering är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Deklarativt kontra imperativt

Imperativ kod beskriver HUR (loopar, räknare och mutation). Deklarativ kod beskriver VAD. Arraymetoder som map, filter och reduce låter er beskriva omvandlingar utan manuella loopar.

const nums = [1, 2, 3, 4];
const doubled = nums.map((n) => n * 2);
console.log(doubled); // [2, 4, 6, 8]

map: Omvandla varje element

map returnerar en ny array med samma längd, där varje element omvandlas av er funktion. Originalet lämnas orört.

const names = ["ada", "bob"];
const upper = names.map((n) => n.toUpperCase());
console.log(upper); // ["ADA", "BOB"]
console.log(names); // unchanged

filter: Behåll vissa element

filter returnerar en ny array som bara innehåller element för vilka ert predikat returnerar ett truthy-värde.

const nums = [1, 2, 3, 4, 5, 6];
const evens = nums.filter((n) => n % 2 === 0);
console.log(evens); // [2, 4, 6]

reduce: Vik ihop till ett värde

reduce reducerar en array till ett enda värde genom ackumulering. Ange en reducerare och ett startvärde.

const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, n) => acc + n, 0);
console.log(sum); // 10

Kedja operationer

Eftersom varje metod returnerar en ny array kan ni kedja ihop dem till en lättläst pipeline som läses uppifrån och ned.

const nums = [1, 2, 3, 4, 5, 6];
const result = nums
  .filter((n) => n % 2 === 0)
  .map((n) => n * 10);
console.log(result); // [20, 40, 60]

En realistisk pipeline

Kombinera filter, map och reduce för att besvara en fråga om en datamängd i ett enda uttryck.

const orders = [
  { item: "pen", price: 3, paid: true },
  { item: "ink", price: 8, paid: false },
  { item: "pad", price: 5, paid: true }
];
const paidTotal = orders
  .filter((o) => o.paid)
  .map((o) => o.price)
  .reduce((a, p) => a + p, 0);
console.log(paidTotal); // 8

Mappa till nya strukturer

map kan omforma objekt, inte bara tal. Projicera varje post till de fält ni behöver.

const users = [{ id: 1, name: "Ada", age: 36 }];
const summary = users.map((u) => ({ id: u.id, label: u.name }));
console.log(summary); // [{ id: 1, label: "Ada" }]

reduce kan bygga vad som helst

reduce används inte bara för summor. Det kan bygga objekt, gruppera data och till och med återskapa map och filter.

const words = ["a", "bb", "a", "ccc"];
const counts = words.reduce((acc, w) => {
  acc[w] = (acc[w] || 0) + 1;
  return acc;
}, {});
console.log(counts); // { a: 2, bb: 1, ccc: 1 }

Ordningen spelar roll

Genom att filtrera före mappningen slipper ni omvandla element som ni ändå kommer att kasta bort. Placera billiga filter tidigt i kedjan för tydlighet och effektivitet.

const data = [1, 2, 3, 4, 5];
const out = data
  .filter((n) => n > 2)   // shrink first
  .map((n) => n * n);     // then transform
console.log(out); // [9, 16, 25]

Ingen mutation någonstans

Dessa metoder ändrar aldrig källarrayen. Det gör pipelines säkra och förutsägbara och passar perfekt med den funktionella stilen.

const src = [3, 1, 2];
const sorted = [...src].sort((a, b) => a - b);
console.log(sorted); // [1, 2, 3]
console.log(src);    // [3, 1, 2] untouched

flatMap för nästlade resultat

När map producerar arrayer mappar flatMap och plattar ut en nivå i ett enda steg.

const pairs = [1, 2, 3].flatMap((n) => [n, n * 10]);
console.log(pairs); // [1, 10, 2, 20, 3, 30]

Snabbtest

Deklarativa omvandlingar.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Deklarativa omvandlingar beskriver VAD, inte HUR. map omvandlar, filter väljer ut och reduce viker ihop till ett värde; kedja ihop dem till lättlästa pipelines. Ingen av dem ändrar källan, tidig filtrering är effektiv och reduce kan bygga vilken struktur som helst. Använd flatMap när en map ger arrayer.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Deklarativ datatransformering” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Deklarativ datatransformering”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Deklarativ datatransformering”?

Transformera data med map, filter och reduce. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Deklarativ datatransformering”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till JavaScript Academy