Angular中TypeScript按日期范围过滤折线图嵌套数据数组问题

你遇到的问题其实很容易定位——你的filter回调函数没有返回比较结果！

JavaScript/TypeScript的filter方法要求回调函数返回一个布尔值，以此判断当前项是否应该被保留。你写了日期比较的逻辑，但没有把这个布尔结果return出去，所以filter默认认为所有项都不符合条件，最终就得到了空数组。

修正后的代码 #

把你的代码改成这样即可：

obj.forEach(data => {
  console.log(data.name);
  data.series = data.series.filter((item: any) => {
    // 关键：返回布尔判断结果
    return item.date.getTime() >= fromDate.getTime() && item.date.getTime() <= toDate.getTime();
  });
});

如果喜欢更简洁的写法，可以利用箭头函数的特性（省略大括号时自动返回表达式结果）：

obj.forEach(data => {
  console.log(data.name);
  data.series = data.series.filter((item: any) => 
    item.date.getTime() >= fromDate.getTime() && item.date.getTime() <= toDate.getTime()
  );
});

额外注意事项 #

1. 时区一致性：你的数据里的日期是带Z的UTC时间，要确保fromDate和toDate也是基于UTC的Date对象，或者统一转换为相同时区再比较，避免因为时区差异导致过滤结果不符合预期。
2. 类型安全优化：如果你的项目开启了严格类型检查，建议给数据项定义明确的类型，比如：

interface SeriesItem {
  date: Date;
  value: number;
}

// 后续filter时指定类型
data.series = data.series.filter((item: SeriesItem) => 
  item.date.getTime() >= fromDate.getTime() && item.date.getTime() <= toDate.getTime()
);

这样能提前发现潜在的类型错误，让代码更健壮。

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