JavaScript使用reduce方法处理数组数据未得到正确结果求助

错误原因 #

1. 混淆了数组索引取值和indexOf方法的作用：你需要取data数组指定位置的元素时，应该用数组[索引]语法。而indexOf方法的作用是查找指定元素在数组中的下标，找不到对应元素时就会返回-1，这是你得到异常-1的直接原因。
2. 初始累加值中Fuel的data是空数组，第一次取指定索引的元素时会得到undefined，转数值后会变成NaN，破坏后续计算。
3. 没有处理Fuel字段为NULL的场景，直接对NULL字符串执行parseFloat会得到NaN。
4. reduce回调逻辑错误，你没有基于之前的累加结果做增量计算，每次迭代都生成全新数组，会丢失之前的计算结果。
5. 你期望的输出中data长度为12，但你定义的MesesOptions只有3个月的配置，两者长度不匹配，如果需要12个月的结果，要先补全MesesOptions的12个月配置。

修正后的代码 #

const input = [
  {
    Data: '01/01/2009 00:00:00',
    Fuel: '43575070.000',
    Diesel: '5963754.000',
    monthSingle: '01'
  },
  {
    Data: '01/02/2009 00:00:00',     
    Fuel: 'NULL',
    Diesel: '1509490.000',
    monthSingle: '02'
  },
  {
    Data: '01/03/2009 00:00:00',
    Fuel: '21061010.000',
    Diesel: '6887.000',
    monthSingle: '03'
  },
  {
    Data: '01/04/2009 00:00:00',
    Fuel: '21061010.000',
    Diesel: '6887.000',
    monthSingle: '04'
  }
]
const MesesOptions = [
  { id: 1, value: '01', label: 'Janeiro', sufix: 'Jan' },
  { id: 2, value: '02', label: 'Fevereiro', sufix: 'Fev' },
  { id: 3, value: '03', label: 'Março', sufix: 'Mar' }
  // 补全剩下9个月的配置即可得到长度为12的data数组
]

const TheOutPut = input.reduce((acc, cur) => {
  const prevFuelData = acc.find(item => item.name === 'Fuel').data;
  return [
    {
      name: 'Fuel',
      data: MesesOptions.map((month, index) => {
        const prevValue = prevFuelData[index];
        let addValue = 0;
        if (cur.monthSingle === month.value && cur.Fuel !== 'NULL') {
          addValue = parseFloat(cur.Fuel);
        }
        return prevValue + addValue;
      })
    }
  ]
}, [ { name: 'Fuel', data: new Array(MesesOptions.length).fill(0) } ])

console.log(TheOutPut)

运行结果 #

[
  {
    name: 'Fuel',
    data: [43575070, 0, 21061010]
  }
]

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