如何在.subscribe接收数据后，使用多键对象过滤原始数组？

嘿，这个需求其实很好解决，咱们可以通过数组原生方法结合对象键遍历的逻辑，轻松实现用包含多个可变键的条件对象过滤原始数据，而且不管以后条件里加多少个新的键，代码都能适配。

核心思路 #

咱们需要完成两个核心动作：

• 检查单个数据项是否匹配某一个条件对象的所有键值对（不管条件里有多少个键）
• 从原始数据中筛选出至少匹配一个条件的项

具体实现代码 #

首先，先写一个通用的匹配函数，用来判断单个数据项是否符合某个条件对象：

const matchesCondition = (item: any, condition: any) => {
  // 遍历条件对象的所有键，确保每个键对应的数值都和数据项完全一致
  return Object.keys(condition).every(key => item[key] === condition[key]);
};

然后在RxJS的subscribe回调里，用这个函数配合数组的filter和some方法来过滤数据：

// 假设这是你的Observable订阅逻辑
yourDataObservable.subscribe(oriDa => {
  // 你的条件数组，支持同时设置多个过滤条件
  const cons = [{ yr: 2015, mth: "Feb" }];
  
  // 执行过滤逻辑
  const res = oriDa.filter(item => {
    // 检查当前数据项是否匹配条件数组中的任意一个条件
    return cons.some(condition => matchesCondition(item, condition));
  });

  console.log(res); // 输出就是你想要的结果：[{yr:2015, mth:"Feb", A:24, B:30}]
});

优化类型（可选） #

如果你想避免any带来的类型不安全问题，可以定义对应的接口来约束数据结构：

// 定义原始数据的类型
interface DataItem {
  yr: number;
  mth: string;
  A: number;
  B: number;
}

// 定义条件对象的类型，支持任意字符串键，值可以是数字或字符串
interface FilterCondition {
  [key: string]: number | string;
}

// 使用时指定类型
const oriDa: DataItem[] = [
  {yr: 2015, mth: "Jan", A: 23, B: 29},
  {yr: 2015, mth: "Feb", A: 24, B: 30},
  {yr: 2015, mth: "Mar", A: 25, B: 31},
  {yr: 2016, mth: "Jan", A: 26, B: 32},
  {yr: 2016, mth: "Feb", A: 27, B: 33},
  {yr: 2016, mth: "Mar", A: 28, B: 34},
];

const cons: FilterCondition[] = [{ yr: 2015, mth: "Feb" }];

这样代码的可读性和安全性都会更高，以后维护起来也更方便～

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