如何按date字段合并对象数组，将names转为属性键？

需求描述 #

现有如下对象数组：

[
    {
        "date": "2022-08-26",
        "names": "TOTAL_REVENUE",
        "values": "253599593.31",
        "tabs": "Revenue"
    },
    {
        "date": "2022-08-26",
        "names": "TOTAL_VOICE_REVENUE",
        "values": "142706038.15",
        "tabs": "Revenue"
    },
    {
        "date": "2022-08-27",
        "names": "TOTAL_DATA_REVENUE",
        "values": "97825740.6",
        "tabs": "Revenue"
    },
    {
        "date": "2022-08-27",
        "names": "TOTAL_REVENUE_SM",
        "values": "6731513.29",
        "tabs": "Revenue"
    },
    {
        "date": "2022-08-27",
        "names": "TOTAL_BUNDLE_REVENUE",
        "values": "0",
        "tabs": "Revenue"
    }
]

需要按照date字段合并数组中的对象，将每个对象的names作为新对象的属性键，values作为对应属性值，最终得到如下结构的数组：

[
    {
        "date": "2022-08-26",
        "TOTAL_REVENUE": "253599593.31",
        "TOTAL_VOICE_REVENUE":"142706038.15"
    },
    {
        "date": "2022-08-27",
        "TOTAL_DATA_REVENUE": "97825740.6",
        "TOTAL_REVENUE_SM": "6731513.29",
        "TOTAL_BUNDLE_REVENUE": "0"
    }
]

实现方案 #

可以使用JavaScript的Array.reduce()方法完成转换，核心是通过临时对象按日期分组，再将分组结果转为目标数组：

const originalData = [
    { "date": "2022-08-26", "names": "TOTAL_REVENUE", "values": "253599593.31", "tabs": "Revenue" },
    { "date": "2022-08-26", "names": "TOTAL_VOICE_REVENUE", "values": "142706038.15", "tabs": "Revenue" },
    { "date": "2022-08-27", "names": "TOTAL_DATA_REVENUE", "values": "97825740.6", "tabs": "Revenue" },
    { "date": "2022-08-27", "names": "TOTAL_REVENUE_SM", "values": "6731513.29", "tabs": "Revenue" },
    { "date": "2022-08-27", "names": "TOTAL_BUNDLE_REVENUE", "values": "0", "tabs": "Revenue" }
];

const transformedData = Object.values(originalData.reduce((acc, item) => {
    // 若当前日期未在分组对象中，初始化包含date属性的新对象
    if (!acc[item.date]) {
        acc[item.date] = { date: item.date };
    }
    // 将names作为属性键，values作为对应值添加到日期对象中
    acc[item.date][item.names] = item.values;
    return acc;
}, {}));

console.log(transformedData);

代码说明 #

1. reduce()遍历分组：遍历原始数组，用累加器acc存储按日期分类的对象。
2. 初始化日期对象：遇到新日期时，先创建一个包含date属性的基础对象。
3. 属性赋值：把当前元素的names和values对应成新对象的键值对。
4. 转换为目标数组：通过Object.values()提取分组对象的所有值，形成最终的数组结构。

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