如何使用Rxjs的filter和map操作符遍历Observable中的数组

错误原因 #

你当前的报错核心原因是 RxJS 的filter操作符接收的参数是 Observable 每次发出的完整值：你定义的ranks是Observable<number[]>类型，每次发出的是整个数字数组，所以你传给filter回调的参数n实际是数组类型，直接对数组做%算术运算自然会触发类型错误。 #

两种常用实现方案 #

方案1：直接在map中处理数组（推荐大部分场景使用） #

如果你的业务最终需要拿到处理后的完整数组，不需要单独操作数组内的单个元素，直接在map操作符内对数组做原生的过滤、映射即可，不需要拆分数据流：

ngOnInit(){
  this.rankList$ = this.ranks.pipe(
    // 对发出的整个数组执行过滤，返回处理后的新数组
    map((numArr: number[]) => numArr.filter(n => n % 2 !== 0))
  )
}

该方案逻辑简单、性能更好，是数组型Observable处理的首选方案。 #

方案2：拆分数组为单个元素处理后再合并 #

如果你需要对数组内的每个元素做独立的RxJS操作（比如异步请求、单独的数据流处理），可以先把数组拆成单个元素逐个发出，处理完成后再合并为数组：
首先需要额外导入对应操作符：

import { from } from 'rxjs';
import { concatMap, toArray } from 'rxjs/operators';

修改ngOnInit中的处理逻辑：

ngOnInit(){
  this.rankList$ = this.ranks.pipe(
    // 将发出的数组转换为逐个发出元素的Observable
    concatMap(numArr => from(numArr)),
    // 此时filter接收的就是单个number类型的元素，可以正常做判断
    filter(n => n % 2 !== 0),
    // 所有元素处理完成后，重新合并为数组发出
    toArray()
  )
}

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