如何用JavaScript动态过滤月度数据，避免重复代码适配React C3.js图表

你之前重复写12次filter的方式确实太冗余了，我们可以利用数组的map和reduce方法来动态处理YearlyExpense数据，一次性生成所有月份的总账单数，完全不用重复代码。

核心思路 #

1. 直接遍历YearlyExpense数组里的每个月份条目，不需要手动指定每个月份
2. 对每个月份，用reduce累加该月所有用户的总账单数
3. 把处理结果整理成便于C3图表使用的格式

完整代码示例 #

首先，编写一个函数来处理数据：

// 从YearlyExpense中提取每个月的总账单数
const calculateMonthlyTotalBills = () => {
  return YearlyExpense.map((monthItem) => {
    // 累加该月所有用户的TotalNoOfBills
    const totalBills = monthItem.expense.reduce((total, user) => {
      // 假设每个用户的MonthlyExpenseDetails数组中只有当月的一条数据
      return total + user.MonthlyExpenseDetails[0].TotalNoOfBills;
    }, 0);

    return {
      month: monthItem.month,
      totalBills: totalBills
    };
  });
};

// 获取处理后的数据
const monthlyBillsData = calculateMonthlyTotalBills();

如果你的MonthlyExpenseDetails数组可能包含多条数据（比如用户当月有多个支出分组），只需要调整累加逻辑即可：

const totalBills = monthItem.expense.reduce((total, user) => {
  // 累加用户所有支出明细的总账单数
  const userTotal = user.MonthlyExpenseDetails.reduce((sum, detail) => {
    return sum + detail.TotalNoOfBills;
  }, 0);
  return total + userTotal;
}, 0);

转换为C3图表可用格式 #

接下来把处理后的数据转换成C3条形图需要的结构：

const c3ChartConfig = {
  x: 'month',
  columns: [
    // 生成月份数组
    ['month', ...monthlyBillsData.map(item => item.month)],
    // 生成对应月份的总账单数数组
    ['月度总账单数', ...monthlyBillsData.map(item => item.totalBills)]
  ],
  type: 'bar'
};

为什么这样更好 #

• 无重复代码：不管月份数量如何变化（比如后续新增季度数据），代码都不需要修改
• 可读性更强：逻辑清晰，一眼就能看出来是在计算每个月的总账单数
• 扩展性好：如果后续需要计算其他指标（比如总金额、已批准账单数），只需要在reduce里调整累加的字段即可

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