Angular Academy · Oppitunti

Suodatusoperaattorit

Suodattakaa virtoja operaattoreilla filter, debounceTime ja distinctUntilChanged.

Oppitunti 2/413 vaihetta

Suodatusoperaattorit on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Mitä suodatusoperaattorit tekevät

Suodatusoperaattorit määrittävät, mitkä lähetetyt arvot päästetään läpi ja mitkä hylätään, tai kuinka usein arvoja sallitaan. Ne ovat olennaisia selkeiden ja tehokkaiden streamien kannalta.

filter

filter lähettää vain arvot, jotka täyttävät predikaatin ehdon – aivan kuten Array.filter ajan kuluessa.

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 odottaa lähetysten välistä taukoa ja lähettää sitten uusimman arvon. Se on perinteinen ratkaisu hälyisiin syötetapahtumiin.

import { debounceTime } from 'rxjs';

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

distinctUntilChanged

distinctUntilChanged hylkää arvon, jos se on sama kuin edellinen, jolloin turha työ vältetään.

import { of, distinctUntilChanged } from 'rxjs';

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

Suodatus hakua varten

Tyypillinen hakupipeline yhdistää kaikki kolme operaattoria pyyntöjen minimoimiseksi.

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) lähettää ensimmäiset n arvoa ja päättää sitten streamin – kätevää jatkuvasti toimivasta lähteestä tehtäviin kertaluonteisiin lukuihin.

import { interval, take } from 'rxjs';

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

first ja last

first() lähettää ensimmäisen arvon (haluttaessa predikaatin täyttävän arvon) ja päättää sitten streamin; last() lähettää viimeisen arvon streamin päättyessä.

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

takeWhile lähettää arvoja niin kauan kuin ehto täyttyy ja päättää sitten streamin; skip(n) ohittaa ensimmäiset n arvoa.

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

throttleTime lähettää ensimmäisen arvon ja ohittaa muut tietyn aikavälin ajan – sopii esimerkiksi vierityksen nopeuden rajoittamiseen. debounceTime odottaa hiljaista hetkeä – sopii esimerkiksi hakuun. Ne eivät ole sama asia.

distinctUntilChanged avaimen kanssa

Objekteille kannattaa välittää vertailija tai avaimen valitsin, jotta yhtäsuuruus perustuu olennaiseen kenttään.

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

Miksi suodatuksella on merkitystä

Suodatus vähentää tarpeettomia HTTP-kutsuja, uudelleenrenderöintejä ja laskentaa. Hyvin suodatettu stream voi vähentää hakutoiminnon pyynnöt kymmenistä vain muutamaan.

Pikatarkistus

Testatkaa suodatusoperaattoreiden ymmärrystänne.

Vastaa interaktiivisessa oppitunnissa

Kertaus: suodatusoperaattorit

Suodatusoperaattorit hallitsevat sitä, mitkä arvot kulkevat läpi ja kuinka usein.

filter: predikaattiin perustuva läpipäästö.
debounceTime: odottaa hiljaista hetkeä.
distinctUntilChanged: hylkää toistot.
take/first/skip: sijaintiin perustuva hallinta.

Seuraavaksi: yhdistämisoperaattorit.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 38
Oppitunnit: 144

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Suodatusoperaattorit” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Suodatusoperaattorit”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Suodatusoperaattorit”?

Suodattakaa virtoja operaattoreilla filter, debounceTime ja distinctUntilChanged. Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Suodatusoperaattorit”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Angular Academy-oppitunnilla?

Kyllä. Jokainen Angular Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Angular Academy