如何在JavaScript中从日期数组筛选过去24小时内的记录

问题背景 #

从MySQL数据库获取的交易记录中，created_at字段是"YYYY-MM-DD HH:mm:ss"格式的字符串，需要筛选出当前时间过去24小时内的所有记录，但原有的日期比较逻辑无法正常工作。

原始交易数据：

let userTransactions = [
  {
    id: 1,
    created_at: "2022-08-18 12:15:12",
    updated_at: "2022-08-19 12:15:12",
  },
  {
    id: 2,
    created_at: "2022-08-19 10:15:12",
    updated_at: "2022-08-19 12:15:12",
  },
  {
    id: 3,
    created_at: "2022-08-19 16:15:12",
    updated_at: "2022-08-19 12:15:12",
  },
  {
    id: 4,
    created_at: "2022-08-19 05:15:12",
    updated_at: "2022-08-19 12:15:12",
  },
  {
    id: 5,
    created_at: "2022-08-19 11:15:12",
    updated_at: "2022-08-19 12:15:12",
  },
  {
    id: 6,
    created_at: "2022-08-19 08:15:12",
    updated_at: "2022-08-19 12:15:12",
  },
];

原函数存在的问题：

• 直接用Date对象和字符串比较，隐式转换容易导致错误
• date - 1是将日期转为时间戳后减1毫秒，并非减去1天，逻辑错误
• filter回调中没有返回布尔值，导致筛选结果为空数组

const filterTo24Hours = (userTransactions) => {
let dayTransactions = userTransactions.filter((item) => {
  let date = new Date();

  // 逻辑错误，无法正常筛选
  if (date >= item.created_at && date - 1 <= item.created_at) {
    console.log(item.created_at);
  }
});
return dayTransactions;
 }

正确解决方法 #

核心思路是统一使用时间戳进行比较：

1. 计算当前时间往前推24小时的时间戳（单位：毫秒）
2. 将每条记录的created_at字符串转为Date对象，再获取对应的时间戳
3. 比较记录时间戳是否大于等于24小时前的时间戳，符合条件则保留

完整代码示例 #

const filterTo24Hours = (userTransactions) => {
  // 计算24小时前的时间戳：当前时间 - 24*60*60*1000毫秒
  const twentyFourHoursAgo = Date.now() - 24 * 60 * 60 * 1000;
  
  return userTransactions.filter((item) => {
    // 将MySQL日期字符串转为Date对象，再获取时间戳
    const createdAtTimestamp = new Date(item.created_at).getTime();
    // 比较：记录时间在24小时范围内则返回true
    return createdAtTimestamp >= twentyFourHoursAgo;
  });
};

// 测试调用
const recentTransactions = filterTo24Hours(userTransactions);
console.log(recentTransactions);
// 输出结果会包含id为2、4、5、6的记录（假设当前时间为2022-08-19 12:15左右）

额外说明 #

• MySQL的"YYYY-MM-DD HH:mm:ss"格式可以直接被JavaScript的Date构造函数解析，无需额外处理
• 使用Date.now()获取当前时间戳比new Date().getTime()更简洁
• 如果需要考虑时区问题，可以在转换日期时指定时区（比如使用new Date(item.created_at + 'Z')转为UTC时间，根据实际业务需求调整）

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