Angular Academy · Lektion

Transformationsoperatorer

Använd map, switchMap, mergeMap och concatMap.

Lektion 1 av 413 steg

Transformationsoperatorer är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 1 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 Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad är operatorer

Operatorer är funktioner som ni komponerar i .pipe() för att omvandla en ström. Omvandlingsoperatorer ändrar varje avgivet värde eller plattar ut inre observables till resultatet.

map

map omvandlar varje avgivet värde, ungefär som Array.map men över tid.

import { of, map } from 'rxjs';

of(1, 2, 3).pipe(
  map(n => n * 10)
).subscribe(v => console.log(v)); // 10, 20, 30

Varför mappning i flera nivåer

När varje värde utlöser en annan observable (till exempel ett HTTP-anrop) får ni en observable av observables. Plattningsoperatorer (switchMap, mergeMap, concatMap) prenumererar på den inre och avger dess värden.

switchMap

switchMap avbryter den föregående inre observablen när ett nytt värde anländer. Perfekt för sökning medan ni skriver — gamla begäranden tas bort.

import { switchMap } from 'rxjs';

searchTerm$.pipe(
  switchMap(term => this.http.get('/api/search?q=' + term))
).subscribe(results => console.log(results));

mergeMap

mergeMap (alias flatMap) kör inre observables samtidigt och slår samman alla deras värden. Inget avbryts.

import { mergeMap } from 'rxjs';

ids$.pipe(
  mergeMap(id => this.http.get('/api/item/' + id))
).subscribe(item => console.log(item));
// all requests run in parallel

concatMap

concatMap köar inre observables och kör dem en i taget i ordning och väntar på att var och en ska slutföras. Använd den när ordningen är viktig.

import { concatMap } from 'rxjs';

saveQueue$.pipe(
  concatMap(payload => this.http.post('/api/save', payload))
).subscribe();
// requests run sequentially, in order

exhaustMap

exhaustMap ignorerar nya värden medan en inre observable fortfarande körs. Utmärkt för att förhindra dubbla inskickningar vid ett knapptryck.

import { exhaustMap } from 'rxjs';

submitClicks$.pipe(
  exhaustMap(() => this.http.post('/api/login', creds))
).subscribe();
// extra clicks ignored until request finishes

Välj rätt plattningsoperator

switchMap: avbryt den föregående (sökning).
mergeMap: allt parallellt (oberoende skrivningar).
concatMap: i ordning, en i taget (sekventiella sparningar).
exhaustMap: ignorera medan upptagen (inloggningsknapp).

switchMap och avbrytning

Eftersom switchMap avbryter pågående inre observables avslutar den också prenumerationen på det underliggande HTTP-anropet, vilket Angular översätter till ett avbrutet anrop — och sparar bandbredd.

Kombinera map med en plattningsoperator

Ofta använder ni map för att extrahera data efter plattningen.

searchTerm$.pipe(
  switchMap(term => this.http.get('/api/search?q=' + term)),
  map(res => res.items)
).subscribe(items => console.log(items));

Undvik kapslade prenumerationer

Prenumerera aldrig inuti en prenumeration. Använd i stället en plattningsoperator — då förblir pipelinen deklarativ och rensningen hanteras korrekt.

// BAD:
// outer$.subscribe(v => inner$(v).subscribe(...));
// GOOD:
// outer$.pipe(switchMap(v => inner$(v))).subscribe(...);

Snabbtest

Testa dina kunskaper om transformationsoperatorer.

Besvara frågan i den interaktiva lektionen

Repetition: transformationsoperatorer

map transformerar värden; flattening-operatorer hanterar inre observables.

switchMap: avbryter föregående.
mergeMap: parallellt.
concatMap: sekventiellt och i ordning.
exhaustMap: ignorerar medan den arbetar.

Nästa: filtreringsoperatorer.

Gratis att börja

Lär dig HTML 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: 38
Lektioner: 144

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Transformationsoperatorer” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Transformationsoperatorer”, 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 Angular Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Transformationsoperatorer”?

Använd map, switchMap, mergeMap och concatMap. Ni övar på Angular 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 Angular Academy?

Du behöver inga förkunskaper. Utbildningen i Angular 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 1 av 4.

Hur lång tid tar lektionen ”Transformationsoperatorer”?

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 Angular Academy-lektionen?

Ja. Varje Angular 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 Angular Academy