Angular Academy · 课时

筛选运算符

Q: 「筛选运算符」这节课中我会学到什么？

使用 filter、debounceTime 和 distinctUntilChanged 筛选流。 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 filter、debounceTime 和 distinctUntilChanged 筛选流。

筛选运算符 是 CoddyKit 上的免费 Angular Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

过滤运算符的作用

过滤运算符决定哪些发出的值可以通过、哪些值会被丢弃，或者限制值允许通过的频率。它们对于构建简洁高效的数据流至关重要。

过滤

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 会等待发出值暂时停止，然后发出最新的值。它是处理嘈杂输入事件的经典方法。

import { debounceTime } from 'rxjs';

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

去除连续重复值

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(n) 发出前 n 个值，然后完成数据流——这对于从持续运行的数据源中读取一次性数据非常方便。

import { interval, take } from 'rxjs';

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

首个值和最后一个值

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(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 会等待一段无新值的静默时间——适合搜索。两者并不相同。

带键的去除连续重复值

对于对象，请传入比较器或键选择器，使相等性判断基于相关字段。

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

过滤为何重要

过滤可以减少不必要的 HTTP 调用、重新渲染和计算。经过良好过滤的数据流可以将搜索功能的请求次数从几十次减少到几次。

快速检查

测试您对过滤运算符的理解。

回顾：过滤运算符

过滤运算符控制值传递哪些内容以及传递频率。

filter：基于谓词进行过滤。
debounceTime：等待静默。
distinctUntilChanged：丢弃重复值。
take/first/skip：按位置控制值。

下一节：组合运算符。

常见问题解答

「筛选运算符」课时是免费的吗？

是的 — 「筛选运算符」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「筛选运算符」这节课中我会学到什么？

使用 filter、debounceTime 和 distinctUntilChanged 筛选流。你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「筛选运算符」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Angular Academy