JavaScript 数组分组与日期排序详解-js教程-PHP中文网

JavaScript 数组分组与日期排序详解

碧海醫心

发布： 2025-08-07 18:02:18

原创

773人浏览过

javascript 数组分组与日期排序详解

本文将详细介绍如何使用 JavaScript 对包含日期和分组信息的对象数组进行分组和排序。我们将首先按日期对数组进行降序排序，然后根据指定的属性（例如 "group"）对排序后的数组进行分组，最后将分组后的数据扁平化为一个新的数组。通过本文，你将掌握高效处理和组织复杂数据结构的方法。

数据准备

假设我们有一个包含日期和分组信息的对象数组，如下所示：

const input = [
  {date: '2023-05-06', group: 'groupA'},
  {date: '2023-05-05', group: 'group1'},
  {date: '2023-05-07', group: 'groupA'},
  {date: '2023-05-08', group: 'group1'},
];

登录后复制

我们的目标是先按照日期降序排序，然后按照 group 属性进行分组，最终得到一个扁平化的数组，其中相同 group 的元素相邻，且整体按照日期降序排列。

实现分组函数 groupBy

首先，我们需要一个通用的 groupBy 函数，它可以根据指定的键（key）对数组进行分组。以下是 groupBy 函数的实现：

立即学习“Java免费学习笔记（深入）”；

function groupBy(input, key) {
  return input.reduce((acc, el) => {
    acc[el[key]] = acc[el[key]] || [];
    acc[el[key]].push(el);
    return acc;
  }, {});
}

登录后复制

这个函数使用 reduce 方法遍历输入数组，并根据指定的 key 值将元素放入对应的分组中。acc 是一个累加器，初始值为空对象 {}。对于每个元素 el，我们检查 acc[el[key]] 是否存在。如果不存在，则创建一个新的空数组；然后将当前元素 el 添加到该数组中。

数组排序

在进行分组之前，我们需要先按照日期对数组进行排序。这里使用 sort 方法，并传入一个比较函数，将日期转换为可比较的数值：

const inputSortedByDate = input.sort((a, b) => Date.parse(b.date) - Date.parse(a.date));

登录后复制

Date.parse() 方法将日期字符串转换为自 1970 年 1 月 1 日午夜以来的毫秒数。通过比较两个日期的毫秒数，我们可以实现日期的升序或降序排序。这里使用 b.date - a.date 实现降序排序，保证最新的日期排在前面。

简篇AI排版

AI排版工具，上传图文素材，秒出专业效果！

554

查看详情

分组与扁平化

接下来，我们使用前面定义的 groupBy 函数对排序后的数组进行分组：

const grouped = groupBy(inputSortedByDate, 'group');

登录后复制

这会将数组按照 group 属性进行分组，生成一个对象，其中键是 group 的值，值是包含具有相同 group 值的元素数组。

最后，我们需要将分组后的对象扁平化为一个数组。这里使用 Object.values() 获取所有分组的数组，然后使用 flat() 方法将这些数组连接成一个单一的数组：

const result = Object.values(grouped).flat();

登录后复制

Object.values() 返回一个包含对象所有值的数组。flat() 方法将一个多维数组扁平化为一个指定深度的数组。在这里，我们使用 flat() 的默认深度（1），将二维数组扁平化为一维数组。

完整代码示例

以下是完整的代码示例：

const input = [
  {date: '2023-05-06', group: 'groupA'},
  {date: '2023-05-05', group: 'group1'},
  {date: '2023-05-07', group: 'groupA'},
  {date: '2023-05-08', group: 'group1'},
];

function groupBy(input, key) {
  return input.reduce((acc, el) => {
    acc[el[key]] = acc[el[key]] || [];
    acc[el[key]].push(el);
    return acc;
  }, {});
}

const inputSortedByDate = input.sort((a, b) => Date.parse(b.date) - Date.parse(a.date));
const grouped = groupBy(inputSortedByDate, 'group');

const result = Object.values(grouped).flat();
console.log('Result:', result);

登录后复制

这段代码会输出以下结果：

Result: [
  { date: '2023-05-08', group: 'group1' },
  { date: '2023-05-05', group: 'group1' },
  { date: '2023-05-07', group: 'groupA' },
  { date: '2023-05-06', group: 'groupA' }
]

登录后复制

总结

通过本文，我们学习了如何使用 JavaScript 对包含日期和分组信息的对象数组进行分组和排序。我们首先实现了一个通用的 groupBy 函数，然后使用 sort 方法对数组进行排序，最后使用 Object.values() 和 flat() 方法将分组后的对象扁平化为一个数组。这些技巧可以帮助你更有效地处理和组织复杂的数据结构，提高代码的可读性和可维护性。

以上就是JavaScript 数组分组与日期排序详解的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

解决React组件列表状态更新不触发渲染：受控组件的最佳实践 React列表状态更新与受控组件：确保UI同步渲染的关键深入理解React状态管理与受控组件：解决列表更新不渲染问题前端项目本地开发：解决“Index of /”目录列表问题 JavaScript 通用排序函数的实现与优化