Angular Academy · Урок

Операторы фильтрации

Фильтруйте потоки с помощью filter, debounceTime и distinctUntilChanged.

Урок 2 из 413 шагов

«Операторы фильтрации» — бесплатный урок Angular Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Назначение операторов фильтрации

Операторы фильтрации определяют, какие выданные значения пропускать, а какие отбрасывать, а также как часто разрешать выдачу значений. Они необходимы для создания чистых и эффективных потоков.

filter

filter выдаёт только значения, соответствующие предикату, — подобно Array.filter, но во времени.

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 ждёт паузу между выдачами, а затем выдаёт последнее значение. Это классическое решение для шумных событий ввода.

import { debounceTime } from 'rxjs';

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

distinctUntilChanged

distinctUntilChanged отбрасывает значение, если оно равно предыдущему, предотвращая лишнюю работу.

import { of, distinctUntilChanged } from 'rxjs';

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

Объединение для поиска

Классический поисковый конвейер объединяет все три оператора, чтобы свести количество запросов к минимуму.

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) выдаёт первые n значений, а затем завершает поток — это удобно для однократного чтения из постоянно работающего источника.

import { interval, take } from 'rxjs';

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

first и last

first() выдаёт первое значение (при необходимости соответствующее предикату), а затем завершает поток; last() выдаёт последнее значение после завершения.

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

takeWhile выдаёт значения, пока выполняется условие, а затем завершает поток; skip(n) игнорирует первые n значений.

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

throttleTime выдаёт первое значение, а затем игнорирует остальные в течение заданного интервала — это подходит для ограничения частоты событий прокрутки. debounceTime ждёт тишины — это подходит для поиска. Это разные операторы.

distinctUntilChanged с ключом

Для объектов передайте компаратор или функцию выбора ключа, чтобы сравнение выполнялось по нужному полю.

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

Почему важна фильтрация

Фильтрация сокращает количество ненужных HTTP-вызовов, повторных отрисовок и вычислений. Хорошо отфильтрованный поток может сократить число запросов поисковой функции с нескольких десятков до нескольких.

Быстрая проверка

Проверьте, насколько хорошо Вы понимаете операторы фильтрации.

Ответь в интерактивном уроке

Повторение: операторы фильтрации

Операторы фильтрации управляют тем, какие значения проходят через поток и как часто это происходит.

filter: пропускает значения на основе предиката.
debounceTime: ждёт тишины.
distinctUntilChanged: отбрасывает повторы.
take/first/skip: управляют позициями значений.

Далее: операторы объединения.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 38
Уроки: 144

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Операторы фильтрации» бесплатный?

Да — полный текст урока «Операторы фильтрации» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Операторы фильтрации»?

Фильтруйте потоки с помощью filter, debounceTime и distinctUntilChanged. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Операторы фильтрации»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Angular Academy