JavaScript 数组分组与按日期排序教程-小浪学习网

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

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

需求分析

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

实现步骤

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

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

代码示例

以下是完整的代码示例：

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

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 属性进行了降序排序。