React.js如何按月份筛选数据并将数据分配至对应月份分组

你已经完成非储蓄类数据过滤、时间排序、当年数据筛选的前置逻辑，后续分组采用单遍遍历方案即可，时间复杂度O(n)为最优实现，同时可自动保留无数据月份的空占位，直接适配12个月份卡片的渲染需求。

核心逻辑说明 #

• 你的日期字段格式固定为MM/DD/YYYY，无需额外转Date对象解析月份，直接通过字符串截取就能拿到月份值，性能更高
• 预初始化12个月份的空数组容器，避免某个月无数据时对应月份卡片缺失
• 遍历当年有效数据时直接将条目归入对应月份数组，无需多次循环筛选
• 原代码中JSON.parse(JSON.stringify(sortedExpenses))的深拷贝逻辑如果没有修改原始条目的需求可以直接删除，减少不必要的性能损耗

完整实现代码 #

// 前置逻辑优化：移除无意义深拷贝，提前缓存当年年份值避免重复计算
const currentYear = new Date().getFullYear().toString();
const expenses = MOCK_DATA.filter(i => i.Category !== 'Savings');
const sortedExpenses = expenses.sort((a, b) => new Date(...a.Date.split('/').reverse()) - new Date(...b.Date.split('/').reverse()));
const currentYearExpenses = sortedExpenses.filter((d) => d.Date.slice(-4) === currentYear);

// 月份分组核心逻辑
// 数组顺序固定为1月到12月，可直接遍历渲染卡片
const MONTH_NAME = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
const monthlyGroup = Array.from({ length: 12 }, (_, idx) => ({
  monthNum: idx + 1,
  monthLabel: MONTH_NAME[idx],
  expenseList: []
}));

currentYearExpenses.forEach(item => {
  // 截取日期前两位得到月份数字，减1匹配数组索引
  const targetMonth = parseInt(item.Date.slice(0, 2), 10);
  monthlyGroup[targetMonth - 1].expenseList.push(item);
});

分组结果使用说明 #

最终得到的monthlyGroup是长度固定为12的数组，每个元素结构如下：

{
  monthNum: 1, // 数字类型月份，取值1-12
  monthLabel: '一月', // 月份中文名称，可直接作为卡片标题
  expenseList: [/* 当月所有匹配的消费数据，无数据时为空数组 */]
}

直接遍历该数组即可按顺序渲染1-12月的卡片，空数组的月份可直接渲染无数据空状态，不需要额外做排序或补全逻辑。

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