Angular Academy · Lezione

Operatori di filtraggio

Filtri gli stream con filter, debounceTime e distinctUntilChanged.

Lezione 2 di 413 passaggi

Operatori di filtraggio è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Funzione degli operatori di filtraggio

Gli operatori di filtraggio decidono quali valori emessi lasciar passare e quali scartare, oppure con quale frequenza consentire il passaggio dei valori. Sono essenziali per ottenere stream puliti ed efficienti.

filter

filter emette solo i valori che soddisfano un predicato, come Array.filter applicato nel tempo.

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 attende una pausa nelle emissioni, quindi emette il valore più recente. È la soluzione classica per gli eventi di input rumorosi.

import { debounceTime } from 'rxjs';

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

distinctUntilChanged

distinctUntilChanged scarta un valore se è uguale a quello precedente, evitando elaborazioni ridondanti.

import { of, distinctUntilChanged } from 'rxjs';

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

Combinazione per la ricerca

La pipeline di ricerca canonica combina tutti e tre gli operatori per ridurre al minimo le richieste.

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) emette i primi n valori, poi completa lo stream: è utile per letture singole da una sorgente continua.

import { interval, take } from 'rxjs';

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

first e last

first() emette il primo valore (facoltativamente corrispondente a un predicato), poi completa; last() emette il valore finale al completamento.

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 e skip

takeWhile emette i valori finché una condizione è soddisfatta, poi completa; skip(n) ignora i primi n valori.

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 e debounceTime

throttleTime emette il primo valore, poi ignora gli altri per una finestra di tempo: è utile per limitare la frequenza dello scorrimento. debounceTime attende il silenzio: è utile per la ricerca. Non sono la stessa cosa.

distinctUntilChanged con chiave

Per gli oggetti, passi un comparatore o un selettore di chiave, in modo che l'uguaglianza si basi sul campo pertinente.

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

Perché il filtraggio è importante

Il filtraggio riduce le richieste HTTP, i nuovi rendering e i calcoli non necessari. Uno stream filtrato correttamente può ridurre una funzionalità di ricerca da decine di richieste a poche.

Verifica rapida

Verifichi la Sua comprensione degli operatori di filtraggio.

Rispondi nella lezione interattiva

Riepilogo: operatori di filtraggio

Gli operatori di filtraggio controllano quali valori passano e con quale frequenza.

filter: passaggio basato su un predicato.
debounceTime: attende il silenzio.
distinctUntilChanged: scarta le ripetizioni.
take/first/skip: controllo posizionale.

Prossimo argomento: operatori di combinazione.

Gratis per iniziare

Impara HTML con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 38
Lezioni: 144

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Operatori di filtraggio» è gratuita?

Sì — il testo completo di «Operatori di filtraggio» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Operatori di filtraggio»?

Filtri gli stream con filter, debounceTime e distinctUntilChanged. Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Operatori di filtraggio»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy