如何从API返回的对象数组创建按日期分组的嵌套对象

如何遍历API响应返回的对象数组，动态创建一个按日期分组的嵌套对象？示例如下：

现有对象数组：

var objectsArray = [obj1, obj2, obj3];

其中每个对象的结构：

var obj1 = {
    date: "8/25/23",
    id: "Guid1",
    imgUrl: "www.img1.com",
};

var obj2 = {
    date: "8/25/23",
    id: "Guid2",
    imgUrl: "www.img2.com",
};

var obj3 = {
    date: "8/30/23",
    id: "Guid3",
    imgUrl: "www.img3.com",
};

需要生成按日期分组的嵌套对象，最终结果如下：

var objWithoutDuplicateDates = {
    "8/25/23": {
        images: ["www.img1.com", "www.img2.com"]
    },
    "8/30/23": {
        images: ["www.img3.com"]
    }
};

方法一：用forEach遍历构建 #

这是最直观的实现方式，逐一遍历数组元素并完成分组：

// 初始化空对象存储结果
const objWithoutDuplicateDates = {};

objectsArray.forEach(item => {
    const { date, imgUrl } = item;
    // 检查当前日期是否已在结果对象中
    if (objWithoutDuplicateDates[date]) {
        // 已存在则追加图片地址到对应数组
        objWithoutDuplicateDates[date].images.push(imgUrl);
    } else {
        // 不存在则创建新的日期键，并初始化图片数组
        objWithoutDuplicateDates[date] = {
            images: [imgUrl]
        };
    }
});

方法二：用Array.reduce简化代码 #

reduce可以在一次遍历中完成对象构建，代码更简洁：

const objWithoutDuplicateDates = objectsArray.reduce((acc, item) => {
    const { date, imgUrl } = item;
    // 累加器中无当前日期时，初始化对应结构
    if (!acc[date]) {
        acc[date] = { images: [] };
    }
    // 将图片地址加入对应数组
    acc[date].images.push(imgUrl);
    // 返回累加器供下一次迭代使用
    return acc;
}, {}); // 初始值设为空对象

两种方法都能实现需求，forEach更易理解，reduce适合偏好函数式编程的场景。

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