JS嵌套对象数组转换及值求和问题求助

原始数据与期望结构 #

原始JavaScript对象：

let test = {
  date1: [
    {
      time: 1,
      value: 5,
    },
    {
      time: 2,
      value: 6,
    },
  ],
  date2: [
    {
      time: 1,
      value: 20,
    },
    {
      time: 2,
      value: 10,
    },
  ],
};

期望转换后的结构：

let result = {
  date1: {
    values: [5, 6],
    times: [1, 2],
  },
  date2: {
    values: [20, 10],
    times: [1, 2],
  },
};

需求：将每个date对应的数组转换为包含values和times数组的对象，同时对每个date的value值求和。

当前错误实现 #

用户使用reduce的代码：

let keys = Object.keys(test);
let red = keys.reduce((acc, curr) => {
  return (acc[curr] = test[curr].map((e) => e.value));
}, {});

console.log(`red: `, red);

输出结果：red: [ 20, 10 ]

问题原因：reduce回调函数返回的是acc[curr]赋值后的结果（即当前date的value数组），而非累加器acc，导致每次循环都会覆盖累加器，最终只保留最后一个date的value数组。

正确的结构转换方案 #

修复reduce的返回值，确保每次返回累加器acc，同时提取每个date的values和times数组：

let test = {
  date1: [
    { time: 1, value: 5 },
    { time: 2, value: 6 },
  ],
  date2: [
    { time: 1, value: 20 },
    { time: 2, value: 10 },
  ],
};

let result = Object.keys(test).reduce((acc, curr) => {
  const items = test[curr];
  acc[curr] = {
    values: items.map(item => item.value),
    times: items.map(item => item.time)
  };
  // 必须返回累加器，保证循环中累加器的状态被保留
  return acc;
}, {});

console.log(result);

运行后输出的结构与期望一致。

对每个date的value求和 #

可以在转换结构时直接计算求和，也可以转换后单独计算：

方式一：转换时同时计算求和 #

let resultWithSum = Object.keys(test).reduce((acc, curr) => {
  const items = test[curr];
  const values = items.map(item => item.value);
  acc[curr] = {
    values,
    times: items.map(item => item.time),
    sum: values.reduce((total, num) => total + num, 0)
  };
  return acc;
}, {});

console.log(resultWithSum);

输出结果：

{
  date1: { values: [5, 6], times: [1, 2], sum: 11 },
  date2: { values: [20, 10], times: [1, 2], sum: 30 }
}

方式二：转换后单独计算求和 #

如果已经得到转换后的result对象，可单独遍历计算每个date的value总和：

const sums = Object.keys(result).reduce((acc, curr) => {
  acc[curr] = result[curr].values.reduce((total, num) => total + num, 0);
  return acc;
}, {});

console.log(sums); // { date1: 11, date2: 30 }

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