Angular 13中筛选两个日期间隔范围内列表项的实现方案

基础实现思路 #

当前需求是筛选date属性落在2021年8月1日 至 2022年10月12日区间内的列表项，因为所有条目已经内置标准日期对象，不需要额外做字符串解析，直接通过原生日期大小比较即可完成筛选，不需要引入第三方依赖。

代码示例 #

JavaScript 运行环境

// 定义筛选区间边界，注意JS Date对象月份从0开始计数：8月对应索引7，10月对应索引9
const RANGE_START = new Date(2021, 7, 1, 0, 0, 0);
const RANGE_END = new Date(2022, 9, 12, 23, 59, 59);

// 直接遍历原列表做过滤
const croppedList = originList.filter(item => {
  return item.date >= RANGE_START && item.date <= RANGE_END;
});

Python 运行环境

from datetime import datetime

RANGE_START = datetime(2021, 8, 1, 0, 0, 0)
RANGE_END = datetime(2022, 10, 12, 23, 59, 59)

cropped_list = [item for item in origin_list if RANGE_START <= item.date <= RANGE_END]

选型理由 #

• 性能足够好：全程用原生语法实现，没有额外依赖开销，单次遍历的时间复杂度为O(n)，哪怕是十万级条目的列表，处理耗时也在毫秒级，完全不会出现页面卡顿、接口响应慢之类的问题。
• 边界容错率高：手动指定了起止时间的时分秒值，结束时间取区间最后一天的23:59:59，避免了默认日期取0点导致的10月12日当天的条目被误过滤的问题；而且当前是固定区间筛选，不需要做动态月份推算，从根源上避免了跨月、闰年、大小月导致的日期计算错误。
• 拓展性强：区间边界值抽为独立常量，后续如果要切换成提到的两类动态6个月区间规则，只需要修改RANGE_START和RANGE_END的生成逻辑即可，核心的筛选判断代码不需要做任何改动。

动态区间适配提示：如果后续要切换规则，仅需替换边界生成逻辑：

• 当日向前追溯6个月：RANGE_START设为当前日期减6个月，RANGE_END设为当前日期
• 当日向后顺延6个月：RANGE_START设为当前日期，RANGE_END设为当前日期加6个月

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