如何按日期分组提取visits值？用Array.reduce实现数组分组

原数据 #

const MOCK = {
        data: [
          {date: "Aug.03", name: "Nihal Pandit", visits: 3 },
          {date: "Aug.03", name: "Anthony Elias", visits: 3 },
          {date: "Aug.04", name: "Alex P.", visits: 2 },
          {date: "Aug.05", name: "Alex P.", visits: 3 },
          {date: "Aug.05", name: "Anthony Elias", visits: 3 },
        ]
     }

需求说明 #

将相同date的对象归为一组，每组数组以该date开头，后跟对应所有visits值，最终期望输出：

[["Aug.03", 3, 3], ["Aug.04",2],["Aug.05", 3, 3]]

实现方案 #

使用Array.reduce可以高效完成这个分组逻辑，代码如下：

const result = Object.values(MOCK.data.reduce((acc, item) => {
  // 初始化当前日期对应的数组
  if (!acc[item.date]) {
    acc[item.date] = [item.date];
  }
  // 追加当前项的访问值
  acc[item.date].push(item.visits);
  return acc;
}, {}));

console.log(result);

逻辑解释 #

1. 用reduce遍历原数组，初始累加器为一个空对象，用来按date存储分组后的数组
2. 遍历每个对象时，若当前date未在累加器中，就创建一个以该日期为第一个元素的数组
3. 将当前对象的visits值追加到对应日期的数组中
4. 最后用Object.values提取累加器对象的所有值，得到目标格式的数组

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