JavaScript Academy · leksjon

Deklarativ datatransformasjon

Transformer data med map, filter og reduce.

Leksjon 2 av 413 trinn

Deklarativ datatransformasjon er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Deklarativt kontra imperativt

Imperativ kode sier HVORDAN (løkker, tellere og mutasjon). Deklarativ kode sier HVA. Array-metoder som map, filter og reduce lar Dem beskrive transformasjoner uten manuelle løkker.

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

map: transformere hvert element

map returnerer en ny matrise med samme lengde, der hvert element er transformert av funksjonen Deres. Den opprinnelige matrisen forblir urørt.

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

filter: beholde enkelte elementer

filter returnerer en ny matrise som bare inneholder elementer der predikatet Deres returnerer en sannhetsverdi.

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

reduce: samle til én verdi

reduce reduserer en matrise til én enkelt verdi ved å akkumulere resultatet. Oppgi en reducer og en startverdi.

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

Kjede operasjoner

Fordi hver metode returnerer en ny matrise, kan De kjede dem sammen til en lesbar pipeline som leses ovenfra og 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

Kombiner filter, map og reduce for å besvare et spørsmål om et datasett i ett uttrykk.

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

Mappe til nye strukturer

map kan endre strukturen på objekter, ikke bare tall. Velg ut de feltene De trenger 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 bygge hva som helst

reduce brukes ikke bare til summer. Den kan bygge objekter, gruppere data eller til og med implementere map og filter på nytt.

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 }

Rekkefølgen er viktig

Ved å filtrere før De mapper, unngår De å transformere elementer som likevel skal forkastes. Plasser billige filtre tidlig i kjeden for bedre tydelighet 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 mutasjon noe sted

Disse metodene endrer aldri kildematrisen. Det gjør pipeliner trygge og forutsigbare, og passer perfekt med funksjonell 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 for nøstede resultater

Når en map produserer matriser, mapper flatMap og flater ut ett nivå i ett enkelt trinn.

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

Kort kontroll

Deklarative transformasjoner.

Besvar den i den interaktive leksjonen

Oppsummering

Deklarative transformasjoner beskriver HVA, ikke HVORDAN. map transformerer, filter velger ut, og reduce samler til én verdi; kjed dem sammen til lesbare pipeliner. Ingen av dem endrer kilden, tidlig filtrering er effektivt, og reduce kan bygge enhver struktur. Bruk flatMap når en map gir matriser.

Gratis å komme i gang

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

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Deklarativ datatransformasjon» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Deklarativ datatransformasjon», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Deklarativ datatransformasjon»?

Transformer data med map, filter og reduce. Du øver på JavaScript 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 JavaScript Academy?

Ingen tidligere erfaring er nødvendig. JavaScript 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 2 av 4.

Hvor lang tid tar leksjonen «Deklarativ datatransformasjon»?

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

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

← Tilbake til JavaScript Academy