Angular Academy · Ders

Filtreleme İşleçleri

Akışları filter, debounceTime ve distinctUntilChanged ile filtreleyin.

Filtreleme İşleçleri, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 2. 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.

Filtreleme işleçleri ne yapar

Filtreleme işleçleri, yayılan değerlerden hangilerinin akışa geçeceğine ve hangilerinin eleneceğine ya da değerlerin ne sıklıkla kabul edileceğine karar verir. Temiz ve verimli akışlar için vazgeçilmezdir.

filter

filter, yalnızca bir koşulu geçen değerleri yayınlar; zaman içinde çalışan Array.filter gibidir.

import { of, filter } from 'rxjs';

of(1, 2, 3, 4).pipe(
  filter(n => n % 2 === 0)
).subscribe(v => console.log(v)); // 2, 4

debounceTime

debounceTime, yayınların duraklamasını bekler ve ardından en son değeri yayınlar. Gürültülü giriş olaylarını düzeltmek için kullanılan klasik çözümdür.

import { debounceTime } from 'rxjs';

searchInput$.pipe(
  debounceTime(300)
).subscribe(term => console.log('search', term));
// emits only after 300ms of silence

distinctUntilChanged

distinctUntilChanged, önceki değerle aynıysa bir değeri eler ve gereksiz işlemleri önler.

import { of, distinctUntilChanged } from 'rxjs';

of('a', 'a', 'b', 'b', 'a').pipe(
  distinctUntilChanged()
).subscribe(v => console.log(v)); // a, b, a

Arama için birleştirme

Standart arama akışı, istekleri en aza indirmek için üçünü birlikte kullanır.

searchInput$.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  filter(term => term.length > 2),
  switchMap(term => this.http.get('/api?q=' + term))
).subscribe(results => console.log(results));

take

take(n), ilk n değeri yayınlar ve ardından akışı tamamlar; devam eden bir kaynaktan tek seferlik okumalar yapmak için kullanışlıdır.

import { interval, take } from 'rxjs';

interval(1000).pipe(
  take(3)
).subscribe(v => console.log(v)); // 0, 1, 2 then complete

first ve last

first(), ilk değeri (isteğe bağlı olarak bir koşulla eşleşen ilk değeri) yayınlar ve ardından tamamlanır; last(), tamamlanma sırasında son değeri yayınlar.

import { of, first, last } from 'rxjs';

of(1, 2, 3).pipe(first()).subscribe(v => console.log(v)); // 1
of(1, 2, 3).pipe(last()).subscribe(v => console.log(v));  // 3

takeWhile ve skip

takeWhile, bir koşul sağlandığı sürece yayın yapar ve ardından tamamlanır; skip(n), ilk n değeri yok sayar.

import { of, takeWhile, skip } from 'rxjs';

of(1, 2, 3, 4, 1).pipe(takeWhile(n => n < 3))
  .subscribe(v => console.log(v)); // 1, 2
of(1, 2, 3).pipe(skip(1)).subscribe(v => console.log(v)); // 2, 3

throttleTime ve debounceTime karşılaştırması

throttleTime, ilk değeri yayınlar ve ardından belirli bir süre boyunca diğerlerini yok sayar; kaydırma hızını sınırlamak için uygundur. debounceTime ise sessizlik oluşmasını bekler; arama için uygundur. İkisi aynı değildir.

Anahtarla distinctUntilChanged

Nesneler için eşitliği ilgili alana göre belirlemek üzere bir karşılaştırıcı veya anahtar seçici geçirin.

source$.pipe(
  distinctUntilChanged((a, b) => a.id === b.id)
).subscribe(v => console.log(v));

Filtreleme neden önemlidir

Filtreleme, gereksiz HTTP çağrılarını, yeniden oluşturmaları ve hesaplamaları azaltır. İyi filtrelenmiş bir akış, bir arama özelliğindeki istek sayısını onlarcadan yalnızca birkaç isteğe düşürebilir.

Kısa Kontrol

Filtreleme işleçlerini ne kadar anladığınızı test edin.

Özet: Filtreleme İşleçleri

Filtreleme işleçleri, değerlerin hangilerinin ve ne sıklıkla akacağını denetler.

filter: Koşula dayalı geçiş.
debounceTime: Sessizliği bekler.
distinctUntilChanged: Tekrarlananları eler.
take/first/skip: Konuma dayalı denetim.

Sırada: birleştirme işleçleri.

Sıkça Sorulan Sorular

“Filtreleme İşleçleri” dersi ücretsiz mi?

Evet — “Filtreleme İş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.

“Filtreleme İşleçleri” dersinde ne öğreneceğim?

Akışları filter, debounceTime ve distinctUntilChanged ile filtreleyin. 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 2. dersidir.

“Filtreleme İş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