Angular Academy · Pelajaran

Operator Penyaringan

Saring aliran dengan filter, debounceTime, dan distinctUntilChanged.

Operator Penyaringan adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Fungsi operator penyaringan

Operator penyaringan menentukan nilai hasil emisi mana yang diteruskan dan mana yang dibuang, atau seberapa sering nilai diizinkan. Operator ini penting untuk membuat aliran tetap bersih dan efisien.

filter

filter hanya menghasilkan nilai yang lolos dari predikat — seperti Array.filter, tetapi diterapkan sepanjang waktu.

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 menunggu jeda dalam emisi, lalu menghasilkan nilai terbaru. Operator ini merupakan solusi klasik untuk peristiwa masukan yang terlalu sering.

import { debounceTime } from 'rxjs';

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

distinctUntilChanged

distinctUntilChanged membuang nilai jika sama dengan nilai sebelumnya, sehingga pekerjaan yang tidak perlu dapat dihindari.

import { of, distinctUntilChanged } from 'rxjs';

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

Menggabungkan untuk pencarian

pipeline pencarian yang umum menggabungkan ketiganya untuk meminimalkan permintaan.

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) menghasilkan n nilai pertama, lalu menyelesaikan aliran — berguna untuk pembacaan satu kali dari sumber yang terus berjalan.

import { interval, take } from 'rxjs';

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

first dan last

first() menghasilkan nilai pertama (yang secara opsional cocok dengan predikat), lalu menyelesaikan aliran; last() menghasilkan nilai terakhir saat aliran selesai.

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

takeWhile menghasilkan nilai selama suatu kondisi terpenuhi, lalu menyelesaikan aliran; skip(n) mengabaikan n nilai pertama.

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 menghasilkan nilai pertama, lalu mengabaikan nilai lain selama jangka waktu tertentu — cocok untuk membatasi laju guliran. debounceTime menunggu hingga tidak ada aktivitas — cocok untuk pencarian. Keduanya tidak sama.

distinctUntilChanged dengan kunci

Untuk objek, berikan pembanding atau pemilih kunci agar kesetaraan didasarkan pada bidang yang relevan.

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

Mengapa penyaringan penting

Penyaringan mengurangi pemanggilan HTTP, render ulang, dan komputasi yang tidak perlu. Aliran yang disaring dengan baik dapat mengurangi fitur pencarian dari puluhan permintaan menjadi hanya beberapa permintaan.

Pemeriksaan Cepat

Uji pemahaman Anda tentang operator penyaringan.

Ringkasan: Operator Penyaringan

Operator penyaringan mengatur nilai mana yang mengalir dan seberapa sering nilai tersebut mengalir.

filter: meneruskan berdasarkan predikat.
debounceTime: menunggu hingga tidak ada aktivitas.
distinctUntilChanged: membuang nilai yang berulang.
take/first/skip: mengatur posisi nilai.

Berikutnya: operator kombinasi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Operator Penyaringan” gratis?

Ya — teks lengkap “Operator Penyaringan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Operator Penyaringan”?

Saring aliran dengan filter, debounceTime, dan distinctUntilChanged. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Operator Penyaringan” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy