JavaScript Academy · Lektion

Deklarativ datatransformation

Transformér data med map, filter og reduce.

Lektion 2 af 413 trin

Deklarativ datatransformation er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Deklarativ kontra imperativ

Imperativ kode siger HVORDAN (løkker, tællere og ændringer). Deklarativ kode siger HVAD. Array-metoder som map, filter og reduce lader dig beskrive transformationer uden manuelle løkker.

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

map: Transformér hvert element

map returnerer et nyt array med samme længde, hvor hvert element er transformeret af din funktion. Det oprindelige array forbliver urørt.

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

filter: Behold nogle elementer

filter returnerer et nyt array, der kun indeholder elementer, som dit prædikat returnerer en sand værdi for.

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

reduce: Saml til én værdi

reduce samler et array til én enkelt værdi ved at akkumulere. Angiv en reduktionsfunktion og en startværdi.

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

Kædning af operationer

Da hver metode returnerer et nyt array, kan du kæde dem sammen til en letlæselig behandlingskæde, der læses fra top til bund.

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 behandlingskæde

Kombinér filter, map og reduce for at besvare et spørgsmål om et datasæt i ét udtryk.

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

Omdannelse til nye strukturer

map kan ændre strukturen af objekter, ikke kun tal. Udvælg de felter, du har brug for, fra hver post.

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 opbygge alt

reduce er ikke kun til summer. Den kan opbygge objekter, gruppere data eller endda genskabe map og 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 }

Rækkefølgen betyder noget

Ved at filtrere før mapping undgår du at transformere elementer, som du alligevel vil kassere. Placér billige filtre tidligt i kæden for at opnå klarhed og 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 ændringer nogen steder

Disse metoder ændrer aldrig kildearrayet. Det gør behandlingskæder sikre og forudsigelige og passer perfekt til den funktionelle stil.

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 til indlejrede resultater

Når en map producerer arrays, anvender flatMap map og flader ét niveau ud i ét trin.

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

Hurtigt tjek

Deklarative transformationer.

Besvar den i den interaktive lektion

Opsummering

Deklarative transformationer beskriver HVAD, ikke HVORDAN. map transformerer, filter udvælger, og reduce samler til én værdi; kæd dem sammen til læselige behandlingskæder. Ingen af dem ændrer kilden, det er effektivt at filtrere tidligt, og reduce kan opbygge enhver struktur. Brug flatMap, når map giver arrays.

Gratis at komme i gang

Lær JavaScript 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: 59
Lektioner: 200

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Deklarativ datatransformation” gratis?

Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Deklarativ datatransformation”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Deklarativ datatransformation”?

Transformér data med map, filter og reduce. Du øver dig i JavaScript 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å JavaScript Academy?

Der kræves ingen tidligere erfaring. JavaScript 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 2 af 4.

Hvor lang tid tager lektionen “Deklarativ datatransformation”?

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 JavaScript Academy-lektion?

Ja. Alle JavaScript 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 JavaScript Academy