如何使用JavaScript转换数组对象并对每个数组的值求和

给定如下结构的对象数组：

const obj1 = [
  {
    "array1" : [
        {"value" : 30},
        {"value" : 30}
    ],
    "array2" : [
        {"value" : 30},
        {"value" : 20}
    ],
    "array3" : [
        {"value" : 30},
        {"value" : 40}
    ]
}
];

需要将其转换为每个数组对应键名和value求和结果的数组，格式如下：

const obj2 = [
  {
    "key": "array1",
    "value": "60",
  },
  {
    "key": "array2",
    "value": "50",
  },
  {
    "key": "array3",
    "value": "70",
  }
];

实现方案 #

可以通过Object.entries、map和reduce组合完成转换，步骤如下：

1. 取出原数组中的目标对象（示例中obj1[0]）
2. 将对象转为键值对数组，遍历每个键和对应的数组
3. 对每个数组使用reduce累加所有元素的value值
4. 将键名和求和结果（转为字符串）组装成目标格式的对象，收集为新数组

完整代码 #

const obj1 = [
  {
    "array1" : [
        {"value" : 30},
        {"value" : 30}
    ],
    "array2" : [
        {"value" : 30},
        {"value" : 20}
    ],
    "array3" : [
        {"value" : 30},
        {"value" : 40}
    ]
}
];

const obj2 = Object.entries(obj1[0]).map(([key, arr]) => {
  // 累加数组中所有value值
  const total = arr.reduce((sum, item) => sum + item.value, 0);
  // 返回目标格式对象，将数值转为字符串
  return {
    key,
    value: String(total)
  };
});

console.log(obj2); // 输出符合要求的数组

关键逻辑说明 #

• Object.entries(obj1[0])：将对象转换为[键名, 对应数组]的键值对数组，方便遍历
• reduce((sum, item) => sum + item.value, 0)：从0开始累加数组中每个元素的value属性，得到总和
• String(total)：将求和的数值结果转为字符串，匹配目标格式中value的类型

扩展：处理原数组包含多个对象的情况 #

如果obj1中有多个对象需要统一转换，可以使用flatMap扁平化结果：

const obj2 = obj1.flatMap(obj => {
  return Object.entries(obj).map(([key, arr]) => {
    const total = arr.reduce((sum, item) => sum + item.value, 0);
    return { key, value: String(total) };
  });
});

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