RxJS中skipWhile与filter操作符的区别是什么？

让我来帮你理清RxJS里skipWhile和filter这俩操作符的核心差异，结合你给出的例子和额外场景对比，会更容易理解：

核心逻辑差异 #

• skipWhile：「跳过直到条件失效，之后全放行」
  这个操作符会持续跳过满足条件的数据流项，直到第一次遇到不满足条件的项之后，后续所有的项都会直接通过管道，不再进行条件判断。简单说就是，一旦“闸门”打开，就再也不会关上。

• filter：「每一项都检查，只留符合要求的」
  这个操作符会对数据流中的每一项都执行条件判断，只有满足条件的项才会被保留并传递下去，不满足的则被过滤掉，不存在“闸门打开后全过”的情况。

结合你的代码示例看输出 #

skipWhile示例 #

const source = interval(1000);
const example = source.pipe(skipWhile(val => val < 5));
const subscribe = example.subscribe(val => console.log(val));

输出结果：第5秒开始输出5，之后每秒依次输出6、7、8...

• 前5次发射的0、1、2、3、4都满足val < 5，所以被跳过；当发射到5时，条件不成立，之后所有递增的数值都会直接被输出，不再做判断。

filter示例 #

const source = interval(1000);
const example = source.pipe(filter(val => val > 5));
const subscribe = example.subscribe(val => console.log(val));

输出结果：第6秒开始输出6，之后每秒依次输出7、8...

• 每一次发射的数值都会被检查是否满足val > 5，0-5都不满足被过滤，只有6及以后的数值才会被输出。

更直观的场景对比 #

假设我们有一个非递增的数据源：from([1, 3, 5, 2, 7, 4])

• 使用skipWhile(val => val < 5)：输出5、2、7、4
  解释：跳过1、3后，遇到5不满足条件，后续的2、7、4不管是否小于5，全部直接通过。
• 使用filter(val => val > 5)：输出7
  解释：只有7满足大于5的条件，其他所有项都被过滤。

总结一下，如果你需要的是“跳过前面符合条件的项，之后全部保留”，选skipWhile；如果需要“全程筛选，只留符合条件的项”，选filter就行～

内容的提问来源于stack exchange，提问作者undefined