React项目中带时间戳对象数组：如何过滤近7天数据并按天分组排序

实现逻辑拆解 #

• 第一步：7天内有效数据过滤
  先定义时间阈值：7天对应的毫秒数为7 * 24 * 60 * 60 * 1000，遍历原始数组，仅保留时间戳大于「当前时间 - 7天毫秒数」的条目，直接筛除超过7天的旧数据。
• 第二步：自然日维度分组
  对过滤后的有效条目，提取自然日唯一标识：将条目时间戳对应的时分秒重置为当日零点，得到的毫秒值作为分组key；用Map结构存储分组内容，同key的条目归入同一数组，同时将分组key格式化为示例要求的周 月 日显示字符串。
• 第三步：排序规则对齐
  分组维度按时间倒序排列，最新的自然日显示在最上方；同一分组内的条目按自身时间戳倒序排列，和示例输出顺序完全匹配。

可直接复用的处理函数 #

// 7天时间阈值常量
const SEVEN_DAY_MS = 7 * 24 * 60 * 60 * 1000;

const processTimelineData = (rawData) => {
  // 1. 过滤7天内的有效数据
  const validRecords = rawData.filter(item => 
    item.timeStamp > Date.now() - SEVEN_DAY_MS
  );

  // 2. 按自然日分组
  const groupMap = new Map();
  validRecords.forEach(record => {
    const date = new Date(record.timeStamp);
    // 计算当日零点的时间戳，作为自然日的唯一标识
    const dayStart = new Date(
      date.getFullYear(),
      date.getMonth(),
      date.getDate()
    ).getTime();
    // 初始化空分组数组
    if (!groupMap.has(dayStart)) groupMap.set(dayStart, []);
    groupMap.get(dayStart).push(record);
  });

  // 3. 转换为结构化分组数组并完成排序
  const groupedResult = Array.from(groupMap.entries())
    .map(([dayStart, records]) => ({
      dateLabel: new Date(dayStart).toDateString(),
      // 同组内按时间倒序排列
      sortedRecords: records.sort((a, b) => b.timeStamp - a.timeStamp)
    }))
    // 分组按日期倒序排列，最新日期在最上方
    .sort((a, b) => new Date(b.dateLabel) - new Date(a.dateLabel));

  return groupedResult;
};

React 组件渲染示例 #

用useMemo缓存数据处理结果，避免组件重复渲染时重复执行计算逻辑：

import { useMemo } from 'react';

const TimelineList = ({ sourceData }) => {
  const groupedTimeline = useMemo(
    () => processTimelineData(sourceData),
    [sourceData]
  );

  return (
    <div className="timeline-container">
      {groupedTimeline.map(group => (
        <div className="timeline-group" key={group.dateLabel}>
          {/* 日期标题 */}
          <h3 className="group-date">{group.dateLabel}</h3>
          {/* 分组内的条目 */}
          {group.sortedRecords.map(item => (
            <p className="group-item" key={item.id}>
              title: {item.title}
            </p>
          ))}
        </div>
      ))}
    </div>
  );
};

细节说明 #

• 日期格式完全匹配示例输出，原生toDateString()返回的字符串格式就是类似Wed Apr 28的结构，无需额外依赖第三方日期库
• 自然日计算基于本地时区，如果需要跨时区对齐，只需调整dayStart的时区偏移计算逻辑即可
• 过滤逻辑直接基于毫秒值比较，无精度损失

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