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

JavaScript 数组分组与按日期排序教程

碧海醫心

发布： 2025-08-07 17:40:01

原创

636人浏览过

javascript 数组分组与按日期排序教程

本教程旨在指导开发者如何使用 JavaScript 对包含日期和分组信息的对象数组进行分组，并按照日期进行排序。通过groupBy函数实现按指定属性分组，并结合sort方法按照日期降序排列，最终将分组后的数据扁平化，生成符合预期结果的数组。

需求分析

假设我们有一个包含对象的数组，每个对象都包含 date（日期）和 group（分组）属性。我们的目标是将数组按照 group 属性进行分组，并在每个分组内按照 date 属性进行降序排序，最后将所有分组扁平化为一个新的数组。

实现步骤

实现该功能的关键在于以下几个步骤：

定义 groupBy 函数: 该函数接收一个数组和一个键名作为参数，根据指定的键名对数组中的元素进行分组。
对数组进行排序: 在分组之前，我们需要先按照日期对数组进行排序，确保每个分组内的元素都是按照日期降序排列的。
调用 groupBy 函数进行分组: 将排序后的数组传递给 groupBy 函数，按照 group 属性进行分组。
扁平化分组后的数据: 使用 Object.values() 获取分组后的所有值，然后使用 flat() 方法将所有分组扁平化为一个新的数组。

代码示例

以下是完整的代码示例：

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

10分钟内自己学会PHP

10分钟内自己学会PHP其中，第1篇为入门篇，主要包括了解PHP、PHP开发环境搭建、PHP开发基础、PHP流程控制语句、函数、字符串操作、正则表达式、PHP数组、PHP与Web页面交互、日期和时间等内容；第2篇为提高篇，主要包括MySQL数据库设计、PHP操作MySQL数据库、Cookie和Session、图形图像处理技术、文件和目录处理技术、面向对象、PDO数据库抽象层、程序调试与错误处理、A

524

查看详情

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;
  }, {});
}

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

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

登录后复制

代码解释：

groupBy(input, key) 函数:
- 使用 reduce 方法遍历输入数组 input。
- acc 是一个累加器对象，用于存储分组后的结果。
- el[key] 获取当前元素的 key 属性值，作为分组的键。
- acc[el[key]] = acc[el[key]] || []; 如果 acc 中不存在以 el[key] 为键的属性，则创建一个空数组。
- acc[el[key]].push(el); 将当前元素 el 添加到对应的分组数组中。
- 最后返回累加器对象 acc。
inputSortedByDate: 使用 sort 方法对原始数组 input 进行排序，排序规则是按照 date 属性进行降序排列。Date.parse() 用于将日期字符串转换为时间戳，方便进行比较。
grouped: 调用 groupBy 函数，将排序后的数组 inputSortedByDate 按照 group 属性进行分组。
result: 使用 Object.values(grouped) 获取分组后的所有值（即所有分组数组），然后使用 flat() 方法将这些分组数组扁平化为一个新的数组。

运行结果

运行以上代码，将会输出以下结果：

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' }
]

登录后复制

可以看到，数组已经按照 group 属性进行了分组，并且每个分组内的元素都按照 date 属性进行了降序排序。