JavaScript使用reduce统计同月份字段总和返回字符串而非数值问题

核心问题点 #

• 未正确处理NULL值转数字的场景：原始数据中字段为NULL字符串时，调用Number('NULL')会得到NaN，你原有代码的判断逻辑写反了，没有针对字段值为NULL的场景做0值 fallback
• reduce迭代逻辑错误：你每次迭代都直接返回仅包含Fuel一个指标的数组，直接覆盖了初始传入的8个指标的累加对象，其他指标直接丢失
• 累加位置逻辑错误：你没有按月份对应索引更新数组对应位置的数值，反而每次都取data[0]累加，还在map外层多套了一层数组，导致data变成二维结构，还出现字符串拼接的异常

修复后代码 #

// 先定义你要统计的所有指标
const INDICATORS = ['Fuel', 'Diesel', 'TermFuel', 'Hidrica', 'Geotermica', 'Eolica', 'Biogas', 'Aux']
// 假设MesesOptions结构为 [{value: '01', label: '1月'}, {value: '02', label: '2月'}, ...]，共12个月
const monthIndexMap = new Map(MesesOptions.map((item, index) => [item.value, index]))

// 第一步：预处理原始数据，把所有指标转成数字，NULL转0，提取月份
const processedData = DataOptions.map(item => {
  const mes = item.Data.split('/')[0]
  const formatted = { mes }
  INDICATORS.forEach(key => {
    formatted[key] = item[key] === 'NULL' ? 0 : Number(item[key])
  })
  return formatted
})

// 第二步：初始化累加结构，每个指标的data数组长度和月份数一致，初始值全为0
const initialAcc = INDICATORS.map(name => ({
  name,
  data: new Array(MesesOptions.length).fill(0)
}))

// 第三步：正确执行reduce累加
const series = processedData.reduce((acc, cur) => {
  const monthIdx = monthIndexMap.get(cur.mes)
  if (monthIdx === undefined) return acc // 忽略不在统计范围内的月份
  acc.forEach(item => {
    item.data[monthIdx] += cur[item.name]
  })
  return acc
}, initialAcc)

输出效果 #

执行后series的结构完全符合你要的图表渲染要求，示例输出：

[
  {
    name: 'Fuel',
    data: [43575070, 0, 21061010, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  },
  // 其他指标结构和Fuel一致
]

内容的提问来源于stack exchange，提问作者NoobDEV-GBL