Angular项目中RxJS filter操作符无法过滤记录是什么原因？

核心错误是混淆了RxJS filter操作符和JavaScript数组原生filter方法的作用边界，两者处理的对象完全不同：

• RxJS的filter是Observable管道操作符，作用是筛选流中发出的整个值，决定这个值要不要继续往下传给订阅者。你的代码经过map转换后，流里发出的是res.payload也就是整个订单数组，此时传入RxJS filter的参数order本质是整个订单数组对象，数组本身不存在name属性，判断条件order.name && /\S/.test(order.name)永远返回false，这一次接口返回的整个数组就被直接过滤掉了，订阅端拿不到任何值。
• 数组原生的Array.prototype.filter是数组实例方法，作用是遍历数组内部的每一个元素，按回调条件筛选元素后返回新数组，正好匹配你筛选单个订单记录的需求，所以放在map里处理payload数组时可以正常生效。

如果一定要拆分RxJS操作符实现相同效果，需要先把数组拆成逐个发出单个订单的流，筛选完成后再重新合并为数组，但这种写法性能远低于直接在map中调用数组filter，无特殊需求不推荐使用，示例代码如下：

public getOrders(type: string, filterObj = {}, otherParams = {}): Observable<{ name: string; qt: number }[]> {
   return this.http.get(apiUrl, { params: { filter: JSON.stringify(filterObj), ...otherParams}})
   .pipe(
     map((res: any) => res.payload),
     mergeMap(orderList => from(orderList)),
     filter((singleOrder: any) => singleOrder.name && /\S/.test(singleOrder.name)),
     toArray()
   );
}

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