Angular Academy · Ders

Dönüştürme İşleçleri

map, switchMap, mergeMap ve concatMap kullanın.

Dönüştürme İşleçleri, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

Operatörler Nedir

Operatörler, bir akışı dönüştürmek için .pipe() içinde birleştirdiğiniz işlevlerdir. Dönüştürme operatörleri yayımlanan her değeri değiştirir veya iç observable'ları düzleştirerek çıktıya aktarır.

map

map, Array.map gibi, ancak zaman içinde yayımlanan her değeri dönüştürür.

import { of, map } from 'rxjs';

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

Üst Düzey Eşleme Neden Kullanılır

Her değer başka bir observable'ı (örneğin bir HTTP çağrısını) tetiklediğinde observable'lardan oluşan bir observable elde edersiniz. Düzleştirme operatörleri (switchMap, mergeMap, concatMap) içteki observable'a abone olur ve onun değerlerini yayımlar.

switchMap

switchMap, yeni bir değer geldiğinde önceki iç observable'ı iptal eder. Yazarken arama için idealdir; eski istekler atılır.

import { switchMap } from 'rxjs';

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

mergeMap

mergeMap (flatMap diğer adıyla), iç observable'ları eşzamanlı olarak çalıştırır ve tüm yayımlarını birleştirir. Hiçbir şey iptal edilmez.

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, iç observable'ları sıraya alır ve her birinin tamamlanmasını bekleyerek bunları sırayla, birer birer çalıştırır. Sıra önemli olduğunda kullanın.

import { concatMap } from 'rxjs';

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

exhaustMap

exhaustMap, iç observable hâlâ çalışırken gelen yeni değerleri yok sayar. Bir düğmeye çift tıklayarak yinelenen gönderimleri önlemek için idealdir.

import { exhaustMap } from 'rxjs';

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

Doğru Düzleştiriciyi Seçme

switchMap: öncekini iptal eder (arama).
mergeMap: hepsini paralel çalıştırır (bağımsız yazma işlemleri).
concatMap: sırayı korur, birer birer çalıştırır (ardışık kaydetme işlemleri).
exhaustMap: meşgulken gelenleri yok sayar (giriş düğmesi).

switchMap ve İptal Etme

switchMap çalışmakta olan iç observable'ları iptal ettiğinden, temel HTTP isteğinin aboneliğinden de çıkar. Angular bunu iptal edilmiş bir istek olarak yorumlar ve bant genişliğinden tasarruf sağlar.

map'i Bir Düzleştiriciyle Birleştirme

Düzleştirme işleminden sonra verileri ayıklamak için sık sık map kullanırsınız.

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

İç İçe subscribe Kullanımından Kaçının

Bir subscribe içinde asla subscribe kullanmayın. Bunun yerine bir düzleştirme operatörü kullanın; böylece pipeline bildirimsel kalır ve temizleme işlemi doğru şekilde yönetilir.

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

Kısa Kontrol

Dönüşüm işleçlerini ne kadar anladığınızı test edin.

Özet: Dönüşüm İşleçleri

map değerleri dönüştürür; düzleştirme işleçleri iç gözlemlenebilirleri yönetir.

switchMap: Önceki işlemi iptal eder.
mergeMap: Paralel çalıştırır.
concatMap: Sıralı ve düzenli çalıştırır.
exhaustMap: Meşgulken gelenleri yok sayar.

Sırada: filtreleme işleçleri.

Sıkça Sorulan Sorular

“Dönüştürme İşleçleri” dersi ücretsiz mi?

Evet — “Dönüştürme İşleçleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“Dönüştürme İşleçleri” dersinde ne öğreneceğim?

map, switchMap, mergeMap ve concatMap kullanın. Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Angular Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Dönüştürme İşleçleri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Angular Academy Sayfasına Dön