javascript - 如何按天、1小时、6小时、8小时、周、月和年对日期数组和总和值进行分组？

Question

我有日期数组，我想按年、月、周、日、6h、8h 和 1h 和总和值对日期进行分组。例如，我有以下数组：

const data = [
  { x: "2021-10-17T14:38:45.540Z", y: 2 },
  { x: "2021-09-16T14:36:46.540Z", y: 1 },
  { x: "2021-01-04T14:35:46.540Z", y: 2 },
  { x: "2021-01-01T14:30:46.540Z", y: 1 },
  { x: "2020-02-01T06:28:47.520Z", y: 12 },
  { x: "2020-02-01T07:28:47.520Z", y: 12 },
  // ...
  { x: "2019-04-13T10:19:20.034Z", y: 20 },
  // ...
  { x: "2018-01-01T09:09:19.134Z", y: 4 },
  { x: "2017-01-01T12:09:19.034Z", y: 11 },
  { x: "2016-01-02T12:10:20.034Z", y: 24 },
  // ...
]

这是我尝试使用 momentjs 和 lodash Group 按日期排列的对象数组

对于这一年，我得到了这个结果，并且没有显示像 2018 年和 2016 年这样的问题：

 [
  {
    "color": "Blue",
    "value": 6,
    "label": "2021"
  },
  {
    "color": "Blue",
    "value": 24,
    "label": "2020"
  },
  {
    "color": "Blue",
    "value": 1212,
    "label": "2019"
  },
  {
    "color": "Blue",
    "value": 11,
    "label": "2017"
  }
]

预计年产量：

[
      {
        "color": "Blue",
        "value": 6,
        "label": "2021"
      },
      {
        "color": "Blue",
        "value": 24,
        "label": "2020"
      },
      {
        "color": "Blue",
        "value": 1212,
        "label": "2019"
      },
      {
        "color": "Blue",
        "value": 10,
        "label": "2018"
      },
      {
        "color": "Blue",
        "value": 11,
        "label": "2017"
      },
      {
        "color": "Blue",
        "value": 48,
        "label": "2016"
      }
    ]

标签： javascriptarraysdatemomentjslodash

Answer 1

这可以通过使用 reduce 的标准 'group-by' 来实现，这里累积到一个对象中并使用Object.values().

我已经声明了一个简单的get_date_parts助手来解析 ISO 日期字符串，它应该足以进行分组，但是如果需要，您可以使用 Date 对象来处理更复杂的标签格式。

这是年份分组，该模式可以适应所有其他分组，尽管您需要做一些算术来确定小时范围。

const data = [{ x: '2021-10-17T14:38:45.540Z', y: 2 }, { x: '2021-09-16T14:36:46.540Z', y: 1 }, { x: '2021-01-04T14:35:46.540Z', y: 2 }, { x: '2021-01-01T14:30:46.540Z', y: 1 }, { x: '2020-02-01T06:28:47.520Z', y: 12 }, { x: '2020-02-01T07:28:47.520Z', y: 12 }, { x: '2019-04-13T10:19:20.034Z', y: 20 }, { x: '2018-01-01T09:09:19.134Z', y: 4 }, { x: '2017-01-01T12:09:19.034Z', y: 11 }, { x: '2016-01-02T12:10:20.034Z', y: 24 },];

function get_date_parts(iso_string) {
  const [year, month, day, hr, min, sec] = iso_string.split(/\D/g);

  return { year, month, day, hr, min, sec };
}

function group_by_year(arr) {
  return Object.values(
    arr.reduce((a, { x: date_string, y: value }) => {
      const { year } = get_date_parts(date_string);
      (a[year] ??= { color: 'Blue?', value: 0, label: year }).value += value;

      return a;
    }, {}),
  );
}

const grouped_by_year = group_by_year(data).sort((a, b) => +b.label - +a.label);

console.log(grouped_by_year);

或按月，还显示了初始分配到a[key].

const data = [{ x: '2021-10-17T14:38:45.540Z', y: 2 }, { x: '2021-09-16T14:36:46.540Z', y: 1 }, { x: '2021-01-04T14:35:46.540Z', y: 2 }, { x: '2021-01-01T14:30:46.540Z', y: 1 }, { x: '2020-02-01T06:28:47.520Z', y: 12 }, { x: '2020-02-01T07:28:47.520Z', y: 12 }, { x: '2019-04-13T10:19:20.034Z', y: 20 }, { x: '2018-01-01T09:09:19.134Z', y: 4 }, { x: '2017-01-01T12:09:19.034Z', y: 11 }, { x: '2016-01-02T12:10:20.034Z', y: 24 },];

function get_date_parts(iso_string) {
  const [year, month, day, hr, min, sec] = iso_string.split(/\D/g);

  return { year, month, day, hr, min, sec };
}

function group_by_month(arr) {
  return Object.values(
    arr.reduce((a, { x: date_string, y: value }) => {
      const { year, month } = get_date_parts(date_string);
      const key = `${year}/${month}`;
      // using logical nullish assignment
      //(a[key] ??= { color: 'Blue?', value: 0, label: key }).value += value;

      // or written out long hand
      if (a[key] === undefined) {
        a[key] = { color: 'Blue?', value: 0, label: key };
      }

      a[key].value += value;

      return a;
    }, {}),
  );
}

const grouped_by_month = group_by_month(data).sort((a, b) => b.label.localeCompare(a.label));

console.log(grouped_by_month);

对于不直接在日期中表示的分组，您可以使用一些简单的算术。

function get_date_parts(iso_string) {
  const [year, month, day, hr, min, sec] = iso_string.split(/\D/g);

  return { year, month, day, hr, min, sec };
}

const date_string = '2020-02-07T07:28:47.520Z';

const { year, month, day, hr } = get_date_parts(date_string);

// week in the month
const week = Math.floor((parseInt(day, 10) - 1) / 7);
const week_label = `${year}/${month} - week ${week + 1}`;
console.log({ week_label, week });

// hour range
const range_size = 8;
const range = Math.floor(parseInt(hr, 10) / range_size);
// range times
const range_start = `${(range * range_size).toString().padStart(2, '0')}:00`;
const range_end = `${(range * range_size + range_size).toString().padStart(2, '0')}:00`;
const range_label = `${day}/${month}/${year} ${range_start}-${range_end}`;

console.log({ range_label, range });